Font Awesome 图标是在 html 页面中显示图标的好方法。它简单、快速且免费。是的！免费。谁不喜欢免费的东西，嗯？在这里，我将展示如何在您的 html 页面中安装和使用 font-awesome。但是，就在那之前，你可能想问——
（免责声明-这篇文章包含附属链接。）
什么是字体真棒？
让我们先看看 font-awesome 到底是什么，
Font Awesome 是一个包含 675 个可缩放矢量图形的集合，可以在大小、颜色和几乎任何可以使用 CSS 对任何字体完成的操作上进行操作。简而言之，它们看起来像图标，但您可以将它们作为字体处理。
有两种方法可以在你的 html 中集成 font-awesome -
1. Font Awesome Link (CDN)
2. 下载和安装
字体真棒链接（CDN）：
这是在您的 html 页面 <head> 标记中仅使用一行代码即可获得令人敬畏的字体的最简单方法。在这种情况下无需下载、安装或配置。只需一行代码，您就可以开始了 -
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">下面的示例显示了如何在您的 html 页面中使用此代码 -
<!Doctype html>
<html>
<head>
<title>Font Awesome Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-futboll-0"></i>
<i class=" fa fa-futboll-0" style="font-size:50px;"></i>
<i class=" fa fa-futboll-0" style="font-size:60px; color:red;"></i>
</body>
</html>下载并安装
在您的项目中使用 CDN 链接并不总是更好，因为它仅在您的设备连接到互联网时才有效，例如，在生产模式下。但是在开发模式下，如果你想在没有任何互联网连接的情况下使用字体真棒图标，你可以下载字体真棒包并将其解压缩到你的项目目录中，并将此代码添加到 <head> 标签中 -
<link rel="stylesheet" href="myProjectPath/font-awesome/css/font-awesome.min.css">此示例显示如何在您的 html 页面中使用此代码 -
<!Doctype html>
<html>
<head>
<title>Font Awesome Example</title>
<link rel="stylesheet" href="myProjectPath/font-awesome/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-futboll-0"></i>
<i class=" fa fa-futboll-0" style="font-size:50px;"></i>
<i class=" fa fa-futboll-0" style="font-size:60px; color:red;"></i>
</body>
</html>
如何使用字体真棒？
现在我们知道如何在我们的项目中集成 font-awesome。现在让我们通过一些示例来看看如何使用它-
更大的图标：
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Example – Larger Icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
font-family:monospace, sans-serif;
}
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h1>Font Awesome Example – Larger Icons</h1>
<table>
<tr>
<th>Icon</th>
<th>Code</th>
</tr>
<tr>
<td><i class="fa fa-briefcase "></i></td>
<td><i class="fa fa-briefcase "></i></td>
</tr>
<tr>
<td><i class="fa fa-briefcase fa-2x "></i></td>
<td><i class="fa fa-briefcase fa-2x "></i></td>
</tr>
<tr>
<td><i class="fa fa-briefcase fa-3x "></i></td>
<td><i class="fa fa-briefcase fa-3x "></i></td>
</tr>
<tr>
<td><i class="fa fa-briefcase fa-4x "></i></td>
<td><i class="fa fa-briefcase fa-4x "></i></td>
</tr>
<tr>
<td><i class="fa fa-briefcase fa-5x "></i></td>
<td><i class="fa fa-briefcase fa-6x "></i></td>
</tr>
</table>
</body>
</html>
结果 ：
列表图标：
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Example – List Icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
font-family:monospace, sans-serif;
}
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h1>Font Awesome Example – List Icons</h1>
<table>
<tr>
<th>Icon List</th>
<th>Code</th>
</tr>
<tr>
<td>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i> List Item 1 </li>
<li><i class="fa-li fa fa-check-square-o "></i> List Item 2 </li>
<li><i class="fa-li fa fa-square-o"></i> List Item 3 </li>
</ul>
</td>
<td>
<pre><ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i> List Item 1 </li>
<li><i class="fa-li fa fa-check-square-o "></i> List Item 2 </li>
<li><i class="fa-li fa fa-square-o"></i> List Item 3 </li>
</ul>
</pre>
</td>
</tr>
</table>
</body>
</html>
结果：
装载机/旋转器图标：
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Example – Loaders / Spinners Icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
font-family:monospace, sans-serif;
}
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h1>Font Awesome Example – Loaders / Spinners Icons</h1>
<table>
<tr>
<th>Icon Spinners</th>
<th>Code</th>
</tr>
<tr>
<td><i class="fa fa-spinner fa-spin fa-2x"></i></td>
<td><i class="fa fa-spinner fa-spin fa-2x "></i></td>
</tr>
<tr>
<td><i class="fa fa-circle-o-notch fa-spin fa-2x "></i></td>
<td><i class="fa fa-circle-o-notch fa-spin fa-2x "></i></td>
</tr>
<tr>
<td><i class="fa fa-refresh fa-spin fa-2x "></i></td>
<td><i class="fa fa-refresh fa-spin fa-2x "></i></td>
</tr>
<tr>
<td><i class="fa fa-cog fa-spin fa-2x "></i></td>
<td><i class="fa fa-cog fa-spin fa-2x "></i></td>
</tr>
</table>
</body>
</html>
结果 ：
颜色图标：
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Example – Color Icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
font-family:monospace, sans-serif;
}
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h1>Font Awesome Example – Color Icons</h1>
<table>
<tr>
<th>Icon</th>
<th>Code</th>
</tr>
<tr>
<td><i class="fa fa-gamepad fa-3x" style="color:green" ></i></td>
<td><i class="fa fa-gamepad fa-3x "> style="color:green" </i></td>
</tr>
<tr>
<td><i class="fa fa-heartbeat fa-3x " style="color:red" ></i></td>
<td><i class="fa fa-heartbeat fa-3x "> style="color:red" </i></td>
</tr>
<tr>
<td><i class="fa fa-fire fa-3x " style="color:orange" ></i></td>
<td><i class="fa fa-fire fa-3x "> style="color:orange" </i></td>
</tr>
<tr>
<td><i class="fa fa-gift fa-3x " style="color:blue" ></i></td>
<td><i class="fa fa-gamepad fa-3x "> style="color:blue" </i></td>
</tr>
</table>
</body>
</html>
结果 ：
只有图标的按钮：
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Example – Buttons with only icon</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
font-family:monospace, sans-serif;
}
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
.custom-button {
padding: 5px 7px;
color: white;
background: #FF7043;
float:left;
margin:2px;
border:0;
}
</style>
</head>
<body>
<h1>Font Awesome Example – Buttons with only icon</h1>
<table>
<tr>
<th>Buttons with only icon</th>
<th>Code</th>
</tr>
<tr>
<td><button class="custom-button" ><i class="fa fa-sign-in" aria-hidden="true"></i></button></td>
<td><button class="custom-button" ><i class="fa fa-sign-in" aria-hidden="true"></i></button></td>
</tr>
<tr>
<td><button class="custom-button" ><i class="fa fa-sign-out" aria-hidden="true"></i></button></td>
<td><button class="custom-button" ><i class="fa fa-sign-out" aria-hidden="true"></i></button></td>
</tr>
<tr>
<td><button class="custom-button" ><i class="fa fa-remove" aria-hidden="true"></i></button></td>
<td><button class="custom-button" ><i class="fa fa-remove" aria-hidden="true"></i></button></td>
</tr>
<tr>
<td><button class="custom-button" ><i class="fa fa-share" aria-hidden="true"></i></button></td>
<td><button class="custom-button" ><i class="fa fa-share" aria-hidden="true"></i></button></td>
</tr>
</table>
</body>
</html> 结果 ：
带有图标和文本的按钮：
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Example – Buttons with icon and text</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
font-family:monospace, sans-serif;
}
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
.custom-button {
padding: 5px 7px;
color: white;
background: #FF7043;
float:left;
margin:2px;
border:0;
}
</style>
</head>
<body>
<h1>Font Awesome Example – Buttons with icon and text</h1>
<table>
<tr>
<th>Button with icon & text</th>
<th>Code</th>
</tr>
<tr>
<td><button class="custom-button" ><i class="fa fa-sign-in" aria-hidden="true"></i> Login</button></td>
<td><button class="custom-button" ><i class="fa fa-sign-in" aria-hidden="true"></i> Login</button></td>
</tr>
<tr>
<td><button class="custom-button" ><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</button></td>
<td><button class="custom-button" ><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</button></td>
</tr>
<tr>
<td><button class="custom-button" ><i class="fa fa-remove" aria-hidden="true"></i> Remove</button></td>
<td><button class="custom-button" ><i class="fa fa-remove" aria-hidden="true"></i> Remove</button></td>
</tr>
<tr>
<td><button class="custom-button" ><i class="fa fa-share" aria-hidden="true"></i> Share</button></td>
<td><button class="custom-button" ><i class="fa fa-share" aria-hidden="true"></i> Share</button></td>
</tr>
</table>
</body>
</html> 结果 ：
因此，通过以上所有示例，您可以看到在 html 中安装和使用 font-awesome 是多么容易。
字体真棒替代
当谈到矢量图标时，字体真棒是最好的。但它仍然有它的局限性。您可能在 675 个图标的集合中找不到您要查找的图标。此外，有时您需要为您的网站设计一些自定义设计的图标，因为漂亮的图标可以让您的网站更加美观。
最好的字体真棒替代品是世界上最受欢迎的图标网站 iconfinder.com。这个名字本身就说明了整个故事，但是，这里有一些亮点-
- 数以千计的高品质图标 [免费和高级] 可供选择，具有惊人的搜索功能。
- 每个图标有多种尺寸：16 x 16、20 x 20、24 x 24、32 x 32、48 x 48、64 x 64、128、128、256 x 256、512 x 512。
- 每个图标都有多种格式：SVG（矢量）、PNG、ICO、ICNS、Adobe Illustrator。
- 超过1800 多名设计师可 根据您的特定需求获得自定义图标。
- 深受 世界顶级公司信赖：DROPBOX、AMAZON、NETFLIX、SAMSUNG
如果您对 iconfinder pro 感兴趣，可以点击 此处订阅。如果你想玩弄字体真棒图标，你可以在 这里看到字体真棒图标的完整列表。