Font Awesome 参考手册

什么是Font Awesome?

Font Awesome是一个用于网站和应用程序的免费开源图标集。它由广泛使用的Web字体和CSS格式组成，提供了各种可缩放矢量图标，可在Retina显示器上使用。Font Awesome由Dave Gandy创建，最初作为Twitter Bootstrap的一个补充而出现，但现在它已成为一种独立的工具。

如何在网站上使用Font Awesome图标

通过CDN链接

Font Awesome提供了CDN链接，你可以直接在html代码中引用。如下：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWjA2r45BzYYTbIiKczL7gqFXTvtx2K2vZ/vv" crossorigin="anonymous">

通过下载文件

你也可以下载Font Awesome的zip文件。从官网下载后解压，将css和font文件夹放到你的代码仓库中，然后在html代码中引用即可。如下：

<link rel="stylesheet" href="/path/to/font-awesome/css/font-awesome.min.css">

在页面内集成Font Awesome

你也可以将Font Awesome的代码粘贴到你的样式表中，并在页面中使用它。如下：

<style>
@font-face {
  font-family: 'FontAwesome';
  src: url('/path/to/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('/path/to/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
  url('/path/to/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
  url('/path/to/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
  url('/path/to/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
  url('/path/to/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon:before {
  content: "\f105";
  font-family: FontAwesome;
}
</style>

<i class="icon"></i>

如何使用Font Awesome图标

使用Font Awesome图标非常简单，只需创建一个元素，并使用合适的class（例如fa fa-camera-retro），然后将其放入文档中。如下：


当然，你也可以使用Font Awesome提供的其他属性来更改大小，颜色等。如下：

 
通过修改class属性中的不同标识符，可以调用不同的图标。具体图标列表可以在Font Awesome官网中查看。

注意事项

请确保引用的Font Awesome版本是最新的。

如果你在使用CDN链接，则需要保持网络畅通才能正常显示图标。

如果你下载了Font Awesome文件，请确保文件路径正确。

在一些旧版本的浏览器中，部分图标可能无法正常显示，所以请尽量使用最新的浏览器。

如果想要使用动画效果，需要先引入animate.css，并为所需元素设置相应的类。

Font Awesome 医疗图标 Font Awesome 品牌图标