Font Awesome为您提供了可扩展的矢量图标,这些图标可以进行自定义-大小,颜色,阴影以及可以使用CSS强大功能完成的任何操作。

一个字库,675个图标

仅一个Font Awesome字库,就包含了与网页相近行为的所有形象化示意图标。

不必依赖JavaScript

更少的兼容性问题,因为Font Awesome不需要JavaScript。

无限的矢量图标

可缩放的矢量图形意味着每个图标无论任意大小都看起来很棒。

免费,像说话一样

Font Awesome完全免费用于商业用途。 查看许可证

CSS控件

轻松设置图标的颜色,大小,阴影以及任意的CSS可定制样式。

完美呈现视网膜级显示效果

Font Awesome图标是矢量的,这意味着它们在高分辨率显示器上更加完美华丽。

更好的设备兼容性

Font Awesome最初是为Bootstrap设计的,可与所有框架完美配合。

更友好的电脑PC端桌面图标

要在桌面上使用Font Awesome矢量图标,查看电脑桌面图标集

易用性

Font Awesome喜欢屏幕阅读器,可帮助您在网络上访问图标。 Font Awesome 更偏爱屏幕阅读器, 可帮助您更简单的在网络上访问图标

Font Awesome总是有一点很棒的人和想法。 所以这是最新版本Font Awesome 4.7的新功能。对新功能有一些想法吗? 期待您加入社区

辅助功能文档

有关如何标记图标的详细信息,具体取决于您的使用方式。 让大多数人都可以使用您的网站图标,然后从此处开始。

更好的例子

现在,每个FA图标示例页面都有一个更好,更易访问的主题。 用户可以复制和粘贴的默认代码块。

辅助功能类别

我们添加了一个专门用于辅助功能的新图标类别, 它初始带有15个图标。如果您需要,请点击更多
您可能知道,Font Awesome在4.7版中提供了41个闪亮的新图标。 是否要访问新图标? 看这里.

有关4.7中语法更改的完整文档,请查看 示例。已经修改的图标名称由@gtagliala维基图标名称变更文档中声明。


Font Awesome CDN是在您的网站或应用上获取Font Awesome的最简单方法,而只需一行代码即可。 无需下载或安装!

引用Css

  1. 在html的<head>中,将位置引用到font-awesome.min.css。
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.11.0/css/fontawesome.min.css">
    

最快的速度应用图标到您的网站

不弄乱您本地或生产环境中的文件。 您将获得Font Awesome的675图标以及CSS工具包-所有这些都针对速度进行了优化,没有任何麻烦。

超简单的升级

由于每个站点都有唯一的嵌入代码,因此您无需输入任何代码即可轻松升级到Font Awesome的最新版本。 十分简单。

自动辅助功能支持

令人激动的CDN字体可帮助您更轻松地自动实现对辅助功能的支持,因此您的图标可以为大多数人使用。 阅读我们的辅助功能最佳实践

异步图标

是否想加快页面加载速度?我们也是。将图标异步加载到后台,以便您的网站加载更快。

或者

想自己扩展和托管Font Awesome源码资料吗? 您可以点击右侧下载,自定义和使用图标和默认样式。 包括CSS和CSS预处理器(Sass和Less)格式。

CSS用法

  1. 将整个font-awesome目录复制到您的项目中。
  2. 在html的<head>中,将位置引用到font-awesome.min.css。
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    
  3. 查看示例(examples) 以开始使用Font Awesome!

Sass或Less用法

应用此方法可以使用Less或Sass自定义Font Awesome 4.7.0。

  1. font-awesome/目录复制到您的项目中。
  2. 打开项目的font-awesome/less/variables.lessfont-awesome/scss/_variables.scss并编辑@fa-font-path$fa-font-path变量以指向您的字体目录。
    @fa-font-path:   "../font";
    

    字体路径是相对于已编译CSS目录的相对路径。

  3. 如果使用静态编译器,则重新编译Less或Sass。 否则,您应该很好。
  4. 查看示例(examples) 以开始使用Font Awesome!
或者

Less Ruby Gem

使用Official Font Awesome Less Ruby Gem可以轻松地将Font Awesome Sass放入Rails或Compass项目。由@supercodepoet慷慨维护。

  1. 将此行添加到应用程序的Gemfile中:
    gem 'font-awesome-less'
    
  2. 然后执行:
    $ bundle
    
  3. 或将其自行安装为:
    $ gem install font-awesome-less
    

如果您使用Rails,请将其添加到例如application.less:

@import "font-awesome-sprockets";
@import "font-awesome";

Sass Ruby Gem

使用Official Font Awesome Sass Ruby Gem可以轻松地将Font Awesome Sass放入Rails或Compass项目。 由@supercodepoet慷慨维护。

  1. 将此行添加到应用程序的Gemfile中:
    gem 'font-awesome-sass'
    
  2. 然后执行:
    $ bundle
    
  3. 或将其自行安装为:
    $ gem install font-awesome-sass
    

如果您使用Rails,请将其添加到例如application.scss:

@import "font-awesome-sprockets";
@import "font-awesome";

安全性校验

为了给旧的和有缺陷的浏览器提供最佳的体验,Font Awesome在多个地方使用CSS browser hacks,将特殊的CSS定位到某些浏览器版本,以解决浏览器本身中的错误。 可以理解,这些hacks使CSS验证程序对它们无效。 在几个地方,我们还使用了尚未完全标准化的尖端(features)CSS功能,但这些功能仅用于逐步增强。

这些验证警告在实践中并不重要,因为CSS的非hacky部分会完全验证,并且hacky部分不会干扰非hacky部分的正常运行,因此为什么我们故意忽略这些特定警告。

校验支持Bootstrap团队授权许可CC BY 3.0

IE8浏览器和@font-face

IE8与:before结合使用时,@font-face存在一些问题。 Font Awesome使用该组合。 如果网页被缓存并在没有鼠标悬停在窗口上方的情况下加载(即,点击刷新按钮或在iframe中加载内容),则在加载字体之前会呈现该页面。 将鼠标悬停在页面(正文)上将显示一些图标,将鼠标悬停在其余图标上也将显示那些图标。 有关详细信息,请参见问题 #954

IE8和@font-faceBootstrap团队授权许可CC BY 3.0

需要IE7支持吗?

如果您需要IE7支持,请让我表示安慰。真的。 Font Awesome 4.7.0不支持IE7,但较旧的版本支持。 您需要查看3.2.1版本使用IE7的说明。

故障排除

如果您在使用Font Awesome时遇到问题,请务必查看 故障排除维基页面。由@gtagliala负责维护。


您已经知道,Font Awesome在4.7版中提供了41个闪亮的新图标。 想要查看这些新图标吗? 点击这里. 想要在电脑桌面使用这些图标吗?点击查看电脑桌面图标集

您可能知道,Font Awesome在4.7版中提供了41个闪亮的新图标。 是否要访问新图标? 看这里.

警告!

显然,Adblock Plus可以使用“删除社交媒体按钮”设置删除Font Awesome品牌图标。 我们不会使用hacks技术来强迫他们展示。 如果您认为这是一个错误,请报告Adblock Plus的问题。 要解决此问题,您需要修改社交图标类名称。
  • 所有品牌图标均为其各自所有者的商标。
  • 使用这些商标并不表示Font Awesome对商标持有人的认可,反之亦然。
  • 品牌图标应仅用于代表其所引用的公司或产品。
  • 除代表特定品牌或服务外,请勿将品牌徽标用于任何目的。

将此部分打印为PDF,以获取完整的向量集。 或者要在桌面上使用,请安装FontAwesome.otf,将其设置为应用程序中的字体,然后直接从此页面复制图标(而不是unicode)并将其粘贴到您的设计中。

4.4 fa-500px [&#xf26e;]
4.7 fa-address-book [&#xf2b9;]
4.7 fa-address-book-o [&#xf2ba;]
4.7 fa-address-card [&#xf2bb;]
4.7 fa-address-card-o [&#xf2bc;]
fa-adjust [&#xf042;]
fa-adn [&#xf170;]
fa-align-center [&#xf037;]
fa-align-justify [&#xf039;]
fa-align-left [&#xf036;]
fa-align-right [&#xf038;]
4.4 fa-amazon [&#xf270;]
fa-ambulance [&#xf0f9;]
4.6 fa-american-sign-language-interpreting [&#xf2a3;]
fa-anchor [&#xf13d;]
fa-android [&#xf17b;]
4.2 fa-angellist [&#xf209;]
fa-angle-double-down [&#xf103;]
fa-angle-double-left [&#xf100;]
fa-angle-double-right [&#xf101;]
fa-angle-double-up [&#xf102;]
fa-angle-down [&#xf107;]
fa-angle-left [&#xf104;]
fa-angle-right [&#xf105;]
fa-angle-up [&#xf106;]
fa-apple [&#xf179;]
fa-archive [&#xf187;]
4.2 fa-area-chart [&#xf1fe;]
fa-arrow-circle-down [&#xf0ab;]
fa-arrow-circle-left [&#xf0a8;]
fa-arrow-circle-o-down [&#xf01a;]
4.0 fa-arrow-circle-o-left [&#xf190;]
4.0 fa-arrow-circle-o-right [&#xf18e;]
fa-arrow-circle-o-up [&#xf01b;]
fa-arrow-circle-right [&#xf0a9;]
fa-arrow-circle-up [&#xf0aa;]
fa-arrow-down [&#xf063;]
fa-arrow-left [&#xf060;]
fa-arrow-right [&#xf061;]
fa-arrow-up [&#xf062;]
fa-arrows [&#xf047;]
fa-arrows-alt [&#xf0b2;]
fa-arrows-h [&#xf07e;]
fa-arrows-v [&#xf07d;]
4.6 fa-asl-interpreting (alias) [&#xf2a3;]
4.6 fa-assistive-listening-systems [&#xf2a2;]
fa-asterisk [&#xf069;]
4.2 fa-at [&#xf1fa;]
4.6 fa-audio-description [&#xf29e;]
4.1 fa-automobile (alias) [&#xf1b9;]
fa-backward [&#xf04a;]
4.4 fa-balance-scale [&#xf24e;]
fa-ban [&#xf05e;]
4.7 fa-bandcamp [&#xf2d5;]
4.1 fa-bank (alias) [&#xf19c;]
fa-bar-chart [&#xf080;]
fa-bar-chart-o (alias) [&#xf080;]
fa-barcode [&#xf02a;]
fa-bars [&#xf0c9;]
4.7 fa-bath [&#xf2cd;]
4.7 fa-bathtub (alias) [&#xf2cd;]
4.4 fa-battery (alias) [&#xf240;]
4.4 fa-battery-0 (alias) [&#xf244;]
4.4 fa-battery-1 (alias) [&#xf243;]
4.4 fa-battery-2 (alias) [&#xf242;]
4.4 fa-battery-3 (alias) [&#xf241;]
4.4 fa-battery-4 (alias) [&#xf240;]
4.4 fa-battery-empty [&#xf244;]
4.4 fa-battery-full [&#xf240;]
4.4 fa-battery-half [&#xf242;]
4.4 fa-battery-quarter [&#xf243;]
4.4 fa-battery-three-quarters [&#xf241;]
4.3 fa-bed [&#xf236;]
fa-beer [&#xf0fc;]
4.1 fa-behance [&#xf1b4;]
4.1 fa-behance-square [&#xf1b5;]
fa-bell [&#xf0f3;]
fa-bell-o [&#xf0a2;]
4.2 fa-bell-slash [&#xf1f6;]
4.2 fa-bell-slash-o [&#xf1f7;]
4.2 fa-bicycle [&#xf206;]
4.2 fa-binoculars [&#xf1e5;]
4.2 fa-birthday-cake [&#xf1fd;]
fa-bitbucket [&#xf171;]
fa-bitbucket-square [&#xf172;]
fa-bitcoin (alias) [&#xf15a;]
4.4 fa-black-tie [&#xf27e;]
4.6 fa-blind [&#xf29d;]
4.5 fa-bluetooth [&#xf293;]
4.5 fa-bluetooth-b [&#xf294;]
fa-bold [&#xf032;]
fa-bolt [&#xf0e7;]
4.1 fa-bomb [&#xf1e2;]
fa-book [&#xf02d;]
fa-bookmark [&#xf02e;]
fa-bookmark-o [&#xf097;]
4.6 fa-braille [&#xf2a1;]
fa-briefcase [&#xf0b1;]
fa-btc [&#xf15a;]
fa-bug [&#xf188;]
4.1 fa-building [&#xf1ad;]
fa-building-o [&#xf0f7;]
fa-bullhorn [&#xf0a1;]
fa-bullseye [&#xf140;]
4.2 fa-bus [&#xf207;]
4.3 fa-buysellads [&#xf20d;]
4.1 fa-cab (alias) [&#xf1ba;]
4.2 fa-calculator [&#xf1ec;]
fa-calendar [&#xf073;]
4.4 fa-calendar-check-o [&#xf274;]
4.4 fa-calendar-minus-o [&#xf272;]
fa-calendar-o [&#xf133;]
4.4 fa-calendar-plus-o [&#xf271;]
4.4 fa-calendar-times-o [&#xf273;]
fa-camera [&#xf030;]
fa-camera-retro [&#xf083;]
4.1 fa-car [&#xf1b9;]
fa-caret-down [&#xf0d7;]
fa-caret-left [&#xf0d9;]
fa-caret-right [&#xf0da;]
fa-caret-square-o-down [&#xf150;]
4.0 fa-caret-square-o-left [&#xf191;]
fa-caret-square-o-right [&#xf152;]
fa-caret-square-o-up [&#xf151;]
fa-caret-up [&#xf0d8;]
4.3 fa-cart-arrow-down [&#xf218;]
4.3 fa-cart-plus [&#xf217;]
4.2 fa-cc [&#xf20a;]
4.2 fa-cc-amex [&#xf1f3;]
4.4 fa-cc-diners-club [&#xf24c;]
4.2 fa-cc-discover [&#xf1f2;]
4.4 fa-cc-jcb [&#xf24b;]
4.2 fa-cc-mastercard [&#xf1f1;]
4.2 fa-cc-paypal [&#xf1f4;]
4.2 fa-cc-stripe [&#xf1f5;]
4.2 fa-cc-visa [&#xf1f0;]
fa-certificate [&#xf0a3;]
fa-chain (alias) [&#xf0c1;]
fa-chain-broken [&#xf127;]
fa-check [&#xf00c;]
fa-check-circle [&#xf058;]
fa-check-circle-o [&#xf05d;]
fa-check-square [&#xf14a;]
fa-check-square-o [&#xf046;]
fa-chevron-circle-down [&#xf13a;]
fa-chevron-circle-left [&#xf137;]
fa-chevron-circle-right [&#xf138;]
fa-chevron-circle-up [&#xf139;]
fa-chevron-down [&#xf078;]
fa-chevron-left [&#xf053;]
fa-chevron-right [&#xf054;]
fa-chevron-up [&#xf077;]
4.1 fa-child [&#xf1ae;]
4.4 fa-chrome [&#xf268;]
fa-circle [&#xf111;]
fa-circle-o [&#xf10c;]
4.1 fa-circle-o-notch [&#xf1ce;]
4.1 fa-circle-thin [&#xf1db;]
fa-clipboard [&#xf0ea;]
fa-clock-o [&#xf017;]
4.4 fa-clone [&#xf24d;]
fa-close (alias) [&#xf00d;]
fa-cloud [&#xf0c2;]
fa-cloud-download [&#xf0ed;]
fa-cloud-upload [&#xf0ee;]
fa-cny (alias) [&#xf157;]
fa-code [&#xf121;]
fa-code-fork [&#xf126;]
4.1 fa-codepen [&#xf1cb;]
4.5 fa-codiepie [&#xf284;]
fa-coffee [&#xf0f4;]
fa-cog [&#xf013;]
fa-cogs [&#xf085;]
fa-columns [&#xf0db;]
fa-comment [&#xf075;]
fa-comment-o [&#xf0e5;]
4.4 fa-commenting [&#xf27a;]
4.4 fa-commenting-o [&#xf27b;]
fa-comments [&#xf086;]
fa-comments-o [&#xf0e6;]
fa-compass [&#xf14e;]
fa-compress [&#xf066;]
4.3 fa-connectdevelop [&#xf20e;]
4.4 fa-contao [&#xf26d;]
fa-copy (alias) [&#xf0c5;]
4.2 fa-copyright [&#xf1f9;]
4.4 fa-creative-commons [&#xf25e;]
fa-credit-card [&#xf09d;]
4.5 fa-credit-card-alt [&#xf283;]
fa-crop [&#xf125;]
fa-crosshairs [&#xf05b;]
fa-css3 [&#xf13c;]
4.1 fa-cube [&#xf1b2;]
4.1 fa-cubes [&#xf1b3;]
fa-cut (alias) [&#xf0c4;]
fa-cutlery [&#xf0f5;]
fa-dashboard (alias) [&#xf0e4;]
4.3 fa-dashcube [&#xf210;]
4.1 fa-database [&#xf1c0;]
4.6 fa-deaf [&#xf2a4;]
4.6 fa-deafness (alias) [&#xf2a4;]
fa-dedent (alias) [&#xf03b;]
4.1 fa-delicious [&#xf1a5;]
fa-desktop [&#xf108;]
4.1 fa-deviantart [&#xf1bd;]
4.3 fa-diamond [&#xf219;]
4.1 fa-digg [&#xf1a6;]
fa-dollar (alias) [&#xf155;]
4.0 fa-dot-circle-o [&#xf192;]
fa-download [&#xf019;]
fa-dribbble [&#xf17d;]
4.7 fa-drivers-license (alias) [&#xf2c2;]
4.7 fa-drivers-license-o (alias) [&#xf2c3;]
fa-dropbox [&#xf16b;]
4.1 fa-drupal [&#xf1a9;]
4.5 fa-edge [&#xf282;]
fa-edit (alias) [&#xf044;]
4.7 fa-eercast [&#xf2da;]
fa-eject [&#xf052;]
fa-ellipsis-h [&#xf141;]
fa-ellipsis-v [&#xf142;]
4.1 fa-empire [&#xf1d1;]
fa-envelope [&#xf0e0;]
fa-envelope-o [&#xf003;]
4.7 fa-envelope-open [&#xf2b6;]
4.7 fa-envelope-open-o [&#xf2b7;]
4.1 fa-envelope-square [&#xf199;]
4.6 fa-envira [&#xf299;]
fa-eraser [&#xf12d;]
4.7 fa-etsy [&#xf2d7;]
fa-eur [&#xf153;]
fa-euro (alias) [&#xf153;]
fa-exchange [&#xf0ec;]
fa-exclamation [&#xf12a;]
fa-exclamation-circle [&#xf06a;]
fa-exclamation-triangle [&#xf071;]
fa-expand [&#xf065;]
4.4 fa-expeditedssl [&#xf23e;]
fa-external-link [&#xf08e;]
fa-external-link-square [&#xf14c;]
fa-eye [&#xf06e;]
fa-eye-slash [&#xf070;]
4.2 fa-eyedropper [&#xf1fb;]
4.6 fa-fa (alias) [&#xf2b4;]
fa-facebook [&#xf09a;]
fa-facebook-f (alias) [&#xf09a;]
4.3 fa-facebook-official [&#xf230;]
fa-facebook-square [&#xf082;]
fa-fast-backward [&#xf049;]
fa-fast-forward [&#xf050;]
4.1 fa-fax [&#xf1ac;]
fa-feed (alias) [&#xf09e;]
fa-female [&#xf182;]
fa-fighter-jet [&#xf0fb;]
fa-file [&#xf15b;]
4.1 fa-file-archive-o [&#xf1c6;]
4.1 fa-file-audio-o [&#xf1c7;]
4.1 fa-file-code-o [&#xf1c9;]
4.1 fa-file-excel-o [&#xf1c3;]
4.1 fa-file-image-o [&#xf1c5;]
4.1 fa-file-movie-o (alias) [&#xf1c8;]
fa-file-o [&#xf016;]
4.1 fa-file-pdf-o [&#xf1c1;]
4.1 fa-file-photo-o (alias) [&#xf1c5;]
4.1 fa-file-picture-o (alias) [&#xf1c5;]
4.1 fa-file-powerpoint-o [&#xf1c4;]
4.1 fa-file-sound-o (alias) [&#xf1c7;]
fa-file-text [&#xf15c;]
fa-file-text-o [&#xf0f6;]
4.1 fa-file-video-o [&#xf1c8;]
4.1 fa-file-word-o [&#xf1c2;]
4.1 fa-file-zip-o (alias) [&#xf1c6;]
fa-files-o [&#xf0c5;]
fa-film [&#xf008;]
fa-filter [&#xf0b0;]
fa-fire [&#xf06d;]
fa-fire-extinguisher [&#xf134;]
4.4 fa-firefox [&#xf269;]
4.6 fa-first-order [&#xf2b0;]
fa-flag [&#xf024;]
fa-flag-checkered [&#xf11e;]
fa-flag-o [&#xf11d;]
fa-flash (alias) [&#xf0e7;]
fa-flask [&#xf0c3;]
fa-flickr [&#xf16e;]
fa-floppy-o [&#xf0c7;]
fa-folder [&#xf07b;]
fa-folder-o [&#xf114;]
fa-folder-open [&#xf07c;]
fa-folder-open-o [&#xf115;]
fa-font [&#xf031;]
4.6 fa-font-awesome [&#xf2b4;]
4.4 fa-fonticons [&#xf280;]
4.5 fa-fort-awesome [&#xf286;]
4.3 fa-forumbee [&#xf211;]
fa-forward [&#xf04e;]
fa-foursquare [&#xf180;]
4.7 fa-free-code-camp [&#xf2c5;]
fa-frown-o [&#xf119;]
4.2 fa-futbol-o [&#xf1e3;]
fa-gamepad [&#xf11b;]
fa-gavel [&#xf0e3;]
fa-gbp [&#xf154;]
4.1 fa-ge (alias) [&#xf1d1;]
fa-gear (alias) [&#xf013;]
fa-gears (alias) [&#xf085;]
4.4 fa-genderless [&#xf22d;]
4.4 fa-get-pocket [&#xf265;]
4.4 fa-gg [&#xf260;]
4.4 fa-gg-circle [&#xf261;]
fa-gift [&#xf06b;]
4.1 fa-git [&#xf1d3;]
4.1 fa-git-square [&#xf1d2;]
fa-github [&#xf09b;]
fa-github-alt [&#xf113;]
fa-github-square [&#xf092;]
4.6 fa-gitlab [&#xf296;]
fa-gittip (alias) [&#xf184;]
fa-glass [&#xf000;]
4.6 fa-glide [&#xf2a5;]
4.6 fa-glide-g [&#xf2a6;]
fa-globe [&#xf0ac;]
4.1 fa-google [&#xf1a0;]
fa-google-plus [&#xf0d5;]
4.6 fa-google-plus-circle (alias) [&#xf2b3;]
4.6 fa-google-plus-official [&#xf2b3;]
fa-google-plus-square [&#xf0d4;]
4.2 fa-google-wallet [&#xf1ee;]
4.1 fa-graduation-cap [&#xf19d;]
fa-gratipay [&#xf184;]
4.7 fa-grav [&#xf2d6;]
fa-group (alias) [&#xf0c0;]
fa-h-square [&#xf0fd;]
4.1 fa-hacker-news [&#xf1d4;]
4.4 fa-hand-grab-o (alias) [&#xf255;]
4.4 fa-hand-lizard-o [&#xf258;]
fa-hand-o-down [&#xf0a7;]
fa-hand-o-left [&#xf0a5;]
fa-hand-o-right [&#xf0a4;]
fa-hand-o-up [&#xf0a6;]
4.4 fa-hand-paper-o [&#xf256;]
4.4 fa-hand-peace-o [&#xf25b;]
4.4 fa-hand-pointer-o [&#xf25a;]
4.4 fa-hand-rock-o [&#xf255;]
4.4 fa-hand-scissors-o [&#xf257;]
4.4 fa-hand-spock-o [&#xf259;]
4.4 fa-hand-stop-o (alias) [&#xf256;]
4.7 fa-handshake-o [&#xf2b5;]
4.6 fa-hard-of-hearing (alias) [&#xf2a4;]
4.5 fa-hashtag [&#xf292;]
fa-hdd-o [&#xf0a0;]
4.1 fa-header [&#xf1dc;]
fa-headphones [&#xf025;]
fa-heart [&#xf004;]
fa-heart-o [&#xf08a;]
4.3 fa-heartbeat [&#xf21e;]
4.1 fa-history [&#xf1da;]
fa-home [&#xf015;]
fa-hospital-o [&#xf0f8;]
4.3 fa-hotel (alias) [&#xf236;]
4.4 fa-hourglass [&#xf254;]
4.4 fa-hourglass-1 (alias) [&#xf251;]
4.4 fa-hourglass-2 (alias) [&#xf252;]
4.4 fa-hourglass-3 (alias) [&#xf253;]
4.4 fa-hourglass-end [&#xf253;]
4.4 fa-hourglass-half [&#xf252;]
4.4 fa-hourglass-o [&#xf250;]
4.4 fa-hourglass-start [&#xf251;]
4.4 fa-houzz [&#xf27c;]
fa-html5 [&#xf13b;]
4.4 fa-i-cursor [&#xf246;]
4.7 fa-id-badge [&#xf2c1;]
4.7 fa-id-card [&#xf2c2;]
4.7 fa-id-card-o [&#xf2c3;]
4.2 fa-ils [&#xf20b;]
fa-image (alias) [&#xf03e;]
4.7 fa-imdb [&#xf2d8;]
fa-inbox [&#xf01c;]
fa-indent [&#xf03c;]
4.4 fa-industry [&#xf275;]
fa-info [&#xf129;]
fa-info-circle [&#xf05a;]
fa-inr [&#xf156;]
4.6 fa-instagram [&#xf16d;]
4.1 fa-institution (alias) [&#xf19c;]
4.4 fa-internet-explorer [&#xf26b;]
4.3 fa-intersex (alias) [&#xf224;]
4.2 fa-ioxhost [&#xf208;]
fa-italic [&#xf033;]
4.1 fa-joomla [&#xf1aa;]
fa-jpy [&#xf157;]
4.1 fa-jsfiddle [&#xf1cc;]
fa-key [&#xf084;]
fa-keyboard-o [&#xf11c;]
fa-krw [&#xf159;]
4.1 fa-language [&#xf1ab;]
fa-laptop [&#xf109;]
4.2 fa-lastfm [&#xf202;]
4.2 fa-lastfm-square [&#xf203;]
fa-leaf [&#xf06c;]
4.3 fa-leanpub [&#xf212;]
fa-legal (alias) [&#xf0e3;]
fa-lemon-o [&#xf094;]
fa-level-down [&#xf149;]
fa-level-up [&#xf148;]
4.1 fa-life-bouy (alias) [&#xf1cd;]
4.1 fa-life-buoy (alias) [&#xf1cd;]
4.1 fa-life-ring [&#xf1cd;]
4.1 fa-life-saver (alias) [&#xf1cd;]
fa-lightbulb-o [&#xf0eb;]
4.2 fa-line-chart [&#xf201;]
fa-link [&#xf0c1;]
fa-linkedin [&#xf0e1;]
fa-linkedin-square [&#xf08c;]
4.7 fa-linode [&#xf2b8;]
fa-linux [&#xf17c;]
fa-list [&#xf03a;]
fa-list-alt [&#xf022;]
fa-list-ol [&#xf0cb;]
fa-list-ul [&#xf0ca;]
fa-location-arrow [&#xf124;]
fa-lock [&#xf023;]
fa-long-arrow-down [&#xf175;]
fa-long-arrow-left [&#xf177;]
fa-long-arrow-right [&#xf178;]
fa-long-arrow-up [&#xf176;]
4.6 fa-low-vision [&#xf2a8;]
fa-magic [&#xf0d0;]
fa-magnet [&#xf076;]
fa-mail-forward (alias) [&#xf064;]
fa-mail-reply (alias) [&#xf112;]
fa-mail-reply-all (alias) [&#xf122;]
fa-male [&#xf183;]
4.4 fa-map [&#xf279;]
fa-map-marker [&#xf041;]
4.4 fa-map-o [&#xf278;]
4.4 fa-map-pin [&#xf276;]
4.4 fa-map-signs [&#xf277;]
4.3 fa-mars [&#xf222;]
4.3 fa-mars-double [&#xf227;]
4.3 fa-mars-stroke [&#xf229;]
4.3 fa-mars-stroke-h [&#xf22b;]
4.3 fa-mars-stroke-v [&#xf22a;]
fa-maxcdn [&#xf136;]
4.2 fa-meanpath [&#xf20c;]
4.3 fa-medium [&#xf23a;]
fa-medkit [&#xf0fa;]
4.7 fa-meetup [&#xf2e0;]
fa-meh-o [&#xf11a;]
4.3 fa-mercury [&#xf223;]
4.7 fa-microchip [&#xf2db;]
fa-microphone [&#xf130;]
fa-microphone-slash [&#xf131;]
fa-minus [&#xf068;]
fa-minus-circle [&#xf056;]
fa-minus-square [&#xf146;]
fa-minus-square-o [&#xf147;]
4.5 fa-mixcloud [&#xf289;]
fa-mobile [&#xf10b;]
fa-mobile-phone (alias) [&#xf10b;]
4.5 fa-modx [&#xf285;]
fa-money [&#xf0d6;]
fa-moon-o [&#xf186;]
4.1 fa-mortar-board (alias) [&#xf19d;]
4.3 fa-motorcycle [&#xf21c;]
4.4 fa-mouse-pointer [&#xf245;]
fa-music [&#xf001;]
fa-navicon (alias) [&#xf0c9;]
4.3 fa-neuter [&#xf22c;]
4.2 fa-newspaper-o [&#xf1ea;]
4.4 fa-object-group [&#xf247;]
4.4 fa-object-ungroup [&#xf248;]
4.4 fa-odnoklassniki [&#xf263;]
4.4 fa-odnoklassniki-square [&#xf264;]
4.4 fa-opencart [&#xf23d;]
4.1 fa-openid [&#xf19b;]
4.4 fa-opera [&#xf26a;]
4.4 fa-optin-monster [&#xf23c;]
fa-outdent [&#xf03b;]
4.0 fa-pagelines [&#xf18c;]
4.2 fa-paint-brush [&#xf1fc;]
4.1 fa-paper-plane [&#xf1d8;]
4.1 fa-paper-plane-o [&#xf1d9;]
fa-paperclip [&#xf0c6;]
4.1 fa-paragraph [&#xf1dd;]
fa-paste (alias) [&#xf0ea;]
fa-pause [&#xf04c;]
4.5 fa-pause-circle [&#xf28b;]
4.5 fa-pause-circle-o [&#xf28c;]
4.1 fa-paw [&#xf1b0;]
4.2 fa-paypal [&#xf1ed;]
fa-pencil [&#xf040;]
fa-pencil-square [&#xf14b;]
fa-pencil-square-o [&#xf044;]
4.5 fa-percent [&#xf295;]
fa-phone [&#xf095;]
fa-phone-square [&#xf098;]
fa-photo (alias) [&#xf03e;]
fa-picture-o [&#xf03e;]
4.2 fa-pie-chart [&#xf200;]
4.6 fa-pied-piper [&#xf2ae;]
4.1 fa-pied-piper-alt [&#xf1a8;]
4.1 fa-pied-piper-pp [&#xf1a7;]
fa-pinterest [&#xf0d2;]
4.3 fa-pinterest-p [&#xf231;]
fa-pinterest-square [&#xf0d3;]
fa-plane [&#xf072;]
fa-play [&#xf04b;]
fa-play-circle [&#xf144;]
fa-play-circle-o [&#xf01d;]
4.2 fa-plug [&#xf1e6;]
fa-plus [&#xf067;]
fa-plus-circle [&#xf055;]
fa-plus-square [&#xf0fe;]
4.0 fa-plus-square-o [&#xf196;]
4.7 fa-podcast [&#xf2ce;]
fa-power-off [&#xf011;]
fa-print [&#xf02f;]
4.5 fa-product-hunt [&#xf288;]
fa-puzzle-piece [&#xf12e;]
4.1 fa-qq [&#xf1d6;]
fa-qrcode [&#xf029;]
fa-question [&#xf128;]
fa-question-circle [&#xf059;]
4.6 fa-question-circle-o [&#xf29c;]
4.7 fa-quora [&#xf2c4;]
fa-quote-left [&#xf10d;]
fa-quote-right [&#xf10e;]
4.1 fa-ra (alias) [&#xf1d0;]
fa-random [&#xf074;]
4.7 fa-ravelry [&#xf2d9;]
4.1 fa-rebel [&#xf1d0;]
4.1 fa-recycle [&#xf1b8;]
4.1 fa-reddit [&#xf1a1;]
4.5 fa-reddit-alien [&#xf281;]
4.1 fa-reddit-square [&#xf1a2;]
fa-refresh [&#xf021;]
4.4 fa-registered [&#xf25d;]
fa-remove (alias) [&#xf00d;]
fa-renren [&#xf18b;]
fa-reorder (alias) [&#xf0c9;]
fa-repeat [&#xf01e;]
fa-reply [&#xf112;]
fa-reply-all [&#xf122;]
4.1 fa-resistance (alias) [&#xf1d0;]
fa-retweet [&#xf079;]
fa-rmb (alias) [&#xf157;]
fa-road [&#xf018;]
fa-rocket [&#xf135;]
fa-rotate-left (alias) [&#xf0e2;]
fa-rotate-right (alias) [&#xf01e;]
4.0 fa-rouble (alias) [&#xf158;]
fa-rss [&#xf09e;]
fa-rss-square [&#xf143;]
4.0 fa-rub [&#xf158;]
4.0 fa-ruble (alias) [&#xf158;]
fa-rupee (alias) [&#xf156;]
4.7 fa-s15 (alias) [&#xf2cd;]
4.4 fa-safari [&#xf267;]
fa-save (alias) [&#xf0c7;]
fa-scissors [&#xf0c4;]
4.5 fa-scribd [&#xf28a;]
fa-search [&#xf002;]
fa-search-minus [&#xf010;]
fa-search-plus [&#xf00e;]
4.3 fa-sellsy [&#xf213;]
4.1 fa-send (alias) [&#xf1d8;]
4.1 fa-send-o (alias) [&#xf1d9;]
4.3 fa-server [&#xf233;]
fa-share [&#xf064;]
4.1 fa-share-alt [&#xf1e0;]
4.1 fa-share-alt-square [&#xf1e1;]
fa-share-square [&#xf14d;]
fa-share-square-o [&#xf045;]
4.2 fa-shekel (alias) [&#xf20b;]
4.2 fa-sheqel (alias) [&#xf20b;]
fa-shield [&#xf132;]
4.3 fa-ship [&#xf21a;]
4.3 fa-shirtsinbulk [&#xf214;]
4.5 fa-shopping-bag [&#xf290;]
4.5 fa-shopping-basket [&#xf291;]
fa-shopping-cart [&#xf07a;]
4.7 fa-shower [&#xf2cc;]
fa-sign-in [&#xf090;]
4.6 fa-sign-language [&#xf2a7;]
fa-sign-out [&#xf08b;]
fa-signal [&#xf012;]
4.6 fa-signing (alias) [&#xf2a7;]
4.3 fa-simplybuilt [&#xf215;]
fa-sitemap [&#xf0e8;]
4.3 fa-skyatlas [&#xf216;]
fa-skype [&#xf17e;]
4.1 fa-slack [&#xf198;]
4.1 fa-sliders [&#xf1de;]
4.2 fa-slideshare [&#xf1e7;]
fa-smile-o [&#xf118;]
4.6 fa-snapchat [&#xf2ab;]
4.6 fa-snapchat-ghost [&#xf2ac;]
4.6 fa-snapchat-square [&#xf2ad;]
4.7 fa-snowflake-o [&#xf2dc;]
4.2 fa-soccer-ball-o (alias) [&#xf1e3;]
fa-sort [&#xf0dc;]
fa-sort-alpha-asc [&#xf15d;]
fa-sort-alpha-desc [&#xf15e;]
fa-sort-amount-asc [&#xf160;]
fa-sort-amount-desc [&#xf161;]
fa-sort-asc [&#xf0de;]
fa-sort-desc [&#xf0dd;]
fa-sort-down (alias) [&#xf0dd;]
fa-sort-numeric-asc [&#xf162;]
fa-sort-numeric-desc [&#xf163;]
fa-sort-up (alias) [&#xf0de;]
4.1 fa-soundcloud [&#xf1be;]
4.1 fa-space-shuttle [&#xf197;]
fa-spinner [&#xf110;]
4.1 fa-spoon [&#xf1b1;]
4.1 fa-spotify [&#xf1bc;]
fa-square [&#xf0c8;]
fa-square-o [&#xf096;]
4.0 fa-stack-exchange [&#xf18d;]
fa-stack-overflow [&#xf16c;]
fa-star [&#xf005;]
fa-star-half [&#xf089;]
fa-star-half-empty (alias) [&#xf123;]
fa-star-half-full (alias) [&#xf123;]
fa-star-half-o [&#xf123;]
fa-star-o [&#xf006;]
4.1 fa-steam [&#xf1b6;]
4.1 fa-steam-square [&#xf1b7;]
fa-step-backward [&#xf048;]
fa-step-forward [&#xf051;]
fa-stethoscope [&#xf0f1;]
4.4 fa-sticky-note [&#xf249;]
4.4 fa-sticky-note-o [&#xf24a;]
fa-stop [&#xf04d;]
4.5 fa-stop-circle [&#xf28d;]
4.5 fa-stop-circle-o [&#xf28e;]
4.3 fa-street-view [&#xf21d;]
fa-strikethrough [&#xf0cc;]
4.1 fa-stumbleupon [&#xf1a4;]
4.1 fa-stumbleupon-circle [&#xf1a3;]
fa-subscript [&#xf12c;]
4.3 fa-subway [&#xf239;]
fa-suitcase [&#xf0f2;]
fa-sun-o [&#xf185;]
4.7 fa-superpowers [&#xf2dd;]
fa-superscript [&#xf12b;]
4.1 fa-support (alias) [&#xf1cd;]
fa-table [&#xf0ce;]
fa-tablet [&#xf10a;]
fa-tachometer [&#xf0e4;]
fa-tag [&#xf02b;]
fa-tags [&#xf02c;]
fa-tasks [&#xf0ae;]
4.1 fa-taxi [&#xf1ba;]
4.7 fa-telegram [&#xf2c6;]
4.4 fa-television [&#xf26c;]
4.1 fa-tencent-weibo [&#xf1d5;]
fa-terminal [&#xf120;]
fa-text-height [&#xf034;]
fa-text-width [&#xf035;]
fa-th [&#xf00a;]
fa-th-large [&#xf009;]
fa-th-list [&#xf00b;]
4.6 fa-themeisle [&#xf2b2;]
4.7 fa-thermometer (alias) [&#xf2c7;]
4.7 fa-thermometer-0 (alias) [&#xf2cb;]
4.7 fa-thermometer-1 (alias) [&#xf2ca;]
4.7 fa-thermometer-2 (alias) [&#xf2c9;]
4.7 fa-thermometer-3 (alias) [&#xf2c8;]
4.7 fa-thermometer-4 (alias) [&#xf2c7;]
4.7 fa-thermometer-empty [&#xf2cb;]
4.7 fa-thermometer-full [&#xf2c7;]
4.7 fa-thermometer-half [&#xf2c9;]
4.7 fa-thermometer-quarter [&#xf2ca;]
4.7 fa-thermometer-three-quarters [&#xf2c8;]
fa-thumb-tack [&#xf08d;]
fa-thumbs-down [&#xf165;]
fa-thumbs-o-down [&#xf088;]
fa-thumbs-o-up [&#xf087;]
fa-thumbs-up [&#xf164;]
fa-ticket [&#xf145;]
fa-times [&#xf00d;]
fa-times-circle [&#xf057;]
fa-times-circle-o [&#xf05c;]
4.7 fa-times-rectangle (alias) [&#xf2d3;]
4.7 fa-times-rectangle-o (alias) [&#xf2d4;]
fa-tint [&#xf043;]
fa-toggle-down (alias) [&#xf150;]
4.0 fa-toggle-left (alias) [&#xf191;]
4.2 fa-toggle-off [&#xf204;]
4.2 fa-toggle-on [&#xf205;]
fa-toggle-right (alias) [&#xf152;]
fa-toggle-up (alias) [&#xf151;]
4.4 fa-trademark [&#xf25c;]
4.3 fa-train [&#xf238;]
4.3 fa-transgender [&#xf224;]
4.3 fa-transgender-alt [&#xf225;]
4.2 fa-trash [&#xf1f8;]
fa-trash-o [&#xf014;]
4.1 fa-tree [&#xf1bb;]
fa-trello [&#xf181;]
4.4 fa-tripadvisor [&#xf262;]
fa-trophy [&#xf091;]
fa-truck [&#xf0d1;]
4.0 fa-try [&#xf195;]
4.2 fa-tty [&#xf1e4;]
fa-tumblr [&#xf173;]
fa-tumblr-square [&#xf174;]
4.0 fa-turkish-lira (alias) [&#xf195;]
4.4 fa-tv (alias) [&#xf26c;]
4.2 fa-twitch [&#xf1e8;]
fa-twitter [&#xf099;]
fa-twitter-square [&#xf081;]
fa-umbrella [&#xf0e9;]
fa-underline [&#xf0cd;]
fa-undo [&#xf0e2;]
4.6 fa-universal-access [&#xf29a;]
4.1 fa-university [&#xf19c;]
fa-unlink (alias) [&#xf127;]
fa-unlock [&#xf09c;]
fa-unlock-alt [&#xf13e;]
fa-unsorted (alias) [&#xf0dc;]
fa-upload [&#xf093;]
4.5 fa-usb [&#xf287;]
fa-usd [&#xf155;]
fa-user [&#xf007;]
4.7 fa-user-circle [&#xf2bd;]
4.7 fa-user-circle-o [&#xf2be;]
fa-user-md [&#xf0f0;]
4.7 fa-user-o [&#xf2c0;]
4.3 fa-user-plus [&#xf234;]
4.3 fa-user-secret [&#xf21b;]
4.3 fa-user-times [&#xf235;]
fa-users [&#xf0c0;]
4.7 fa-vcard (alias) [&#xf2bb;]
4.7 fa-vcard-o (alias) [&#xf2bc;]
4.3 fa-venus [&#xf221;]
4.3 fa-venus-double [&#xf226;]
4.3 fa-venus-mars [&#xf228;]
4.3 fa-viacoin [&#xf237;]
4.6 fa-viadeo [&#xf2a9;]
4.6 fa-viadeo-square [&#xf2aa;]
fa-video-camera [&#xf03d;]
4.4 fa-vimeo [&#xf27d;]
4.0 fa-vimeo-square [&#xf194;]
4.1 fa-vine [&#xf1ca;]
fa-vk [&#xf189;]
4.6 fa-volume-control-phone [&#xf2a0;]
fa-volume-down [&#xf027;]
fa-volume-off [&#xf026;]
fa-volume-up [&#xf028;]
fa-warning (alias) [&#xf071;]
4.1 fa-wechat (alias) [&#xf1d7;]
fa-weibo [&#xf18a;]
4.1 fa-weixin [&#xf1d7;]
4.3 fa-whatsapp [&#xf232;]
4.0 fa-wheelchair [&#xf193;]
4.6 fa-wheelchair-alt [&#xf29b;]
4.2 fa-wifi [&#xf1eb;]
4.4 fa-wikipedia-w [&#xf266;]
4.7 fa-window-close [&#xf2d3;]
4.7 fa-window-close-o [&#xf2d4;]
4.7 fa-window-maximize [&#xf2d0;]
4.7 fa-window-minimize [&#xf2d1;]
4.7 fa-window-restore [&#xf2d2;]
fa-windows [&#xf17a;]
fa-won (alias) [&#xf159;]
4.1 fa-wordpress [&#xf19a;]
4.6 fa-wpbeginner [&#xf297;]
4.7 fa-wpexplorer [&#xf2de;]
4.6 fa-wpforms [&#xf298;]
fa-wrench [&#xf0ad;]
fa-xing [&#xf168;]
fa-xing-square [&#xf169;]
4.4 fa-y-combinator [&#xf23b;]
4.1 fa-y-combinator-square (alias) [&#xf1d4;]
4.1 fa-yahoo [&#xf19e;]
4.4 fa-yc (alias) [&#xf23b;]
4.1 fa-yc-square (alias) [&#xf1d4;]
4.2 fa-yelp [&#xf1e9;]
fa-yen (alias) [&#xf157;]
4.6 fa-yoast [&#xf2b1;]
fa-youtube [&#xf167;]
fa-youtube-play [&#xf16a;]
fa-youtube-square [&#xf166;]

启动并运行后,可以使用<i>标签将Font Awesome图标放置在几乎任何地方。 一些示例可以从Bootstrap文档中重用。

下面的示例依然简单,并假定使用Font Awesome CDN,该CDN提供自动辅助功能支持。 如果您没有使用Font Awesome CDN,请参阅手册的辅助功能示例,并阅读有关使所有用户的图标更加精美的更多信息

基础图标示例 fa-camera-retro

您可以使用CSS 前缀 fa和图标名称将Font Awesome图标放置在几乎任何地方。 Font Awesome设计为与内联元素一起使用(为简洁起见,我们喜欢用<i>标签标记,但在语义上使用<span>更为正确)。

<i class="fa fa-camera-retro"></i> fa-camera-retro
  • 基础图标示例 如果更改图标容器的字体大小,则图标会变大。 颜色,阴影以及其他使用CSS继承修改的其他任何东西也一样。

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

要相对于容器增加图标大小,请使用fa-lg(递增33%),fa-2xfa-3xfa-4x, 或 fa-5x 类。

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
  • 如果您的图标在顶部和底部被砍掉,请确保您已经设置足够的行高。

使用fa-fw将图标设置为固定宽度。 当不同的图标宽度无法对齐时,非常适合使用。 在导航列表和列表组之类的东西中尤其有用。

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>
  • List icons
  • can be used
  • as bullets
  • in lists

使用fa-ulfa-li可以轻松替换无序列表中的默认子项符号。

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

…明天我们会跑得更快些,伸开双臂…然后一个美好的早晨—因此,我们乘船前进,逆流而下,不断回溯到过去。

使用fa-borderfa-pull-rightfa-pull-left可以轻松获得引号或文章图标。

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
...明天我们会跑得更快些,伸开双臂...
然后一个美好的早晨&mdash; 因此,我们乘船前进,逆流而下,不断回溯到过去。

Loading example (with fa-spinner icon) Loading (with fa-circle-o-notch icon) Loading example (with fa-refresh icon) Loading example (with fa-cog icon) Loading example (with fa-spinner icon)

使用fa-spin类使任何图标旋转,并使用fa-pulse使其旋转8步。 适用于fa-spinnerfa-refreshfa-cog

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

注意: 某些平台上的某些浏览器在动画图标方面存在问题,从而导致动画图标的的抖动效果。 查看 issue #671 提供的示例和可能的解决方法。

注意: IE8-IE9不支持CSS3动画。

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  fa-flip-vertical

要任意旋转和翻转图标,请使用fa-rotate-*fa-flip-* 类。

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

要堆叠多个图标,请在父级上使用fa-stack类,将fa-stack-1x用于常规尺寸的图标,并将fa-stack-2x用于较大的图标。 fa-inverse可用作替代图标颜色。 您甚至可以在父级上抛出较大的图标类,以进一步控制大小。

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera

Font Awesome可以与所有Bootstrap组件完美配合。

<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-cog"></i> Settings</a>

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.7.0</a>

<div class="btn-group">
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-left" title="Align Left"></i>
  </a>
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-center" title="Align Center"></i>
  </a>
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-right" title="Align Right"></i>
  </a>
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-justify" title="Align Justify"></i>
  </a>
</div>

<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="Password">
</div>

<div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
    <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
  </ul>
</div>

您可以使用CSS字体样式进行任何操作,也可以结合使用Font Awesome进行处理。

星级评分 (inspired by CSS Tricks)

Refreshing... Saving. Hang tight!

Battery level: 50%

请知悉我们对图标可访问性的看法。如果图标仅添加了一些额外的装饰或品牌,则无需在用户浏览您的网站时向用户宣布该图标 或通过听觉应用。 另外,如果图标在您的内容或界面中传达了含义,请确保也通过替代显示或文本将这一含义传达给辅助技术。

<a class="btn btn-default" href="path/to/settings" aria-label="Settings">
  <i class="fa fa-cog" aria-hidden="true"></i>
</a>

<a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
  <i class="fa fa-trash-o" aria-hidden="true"></i>
</a>

<a class="btn btn-primary" href="#navigation-main" aria-label="Skip to main navigation">
  <i class="fa fa-bars" aria-hidden="true"></i>
</a>
<i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<span class="sr-only">Refreshing...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<span class="sr-only">Saving. Hang tight!</span>
<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
  <input class="form-control" type="password" placeholder="Password">
</div>
<a href="path/to/shopping/cart" class="btn btn-primary" aria-label="View 3 items in your shopping cart">
  <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<span class="sr-only">Battery level: 50%</span>

图标是可以传达大量信息并真正帮助人们理解方向,标志和界面的符号。 重要的是我们创建和使用它们,以便它们可以覆盖尽可能多的人。

关于图标字体和辅助功能

辅助技术的现代版本,例如屏幕阅读器,将读取CSS生成的内容(如何渲染Font Awesome图标)以及特定的Unicode字符。 阅读我们用于渲染图标的默认标记时,辅助技术可能会出现以下问题。

  • 辅助技术可能找不到要读出给用户的任何内容
  • 辅助技术可能会读取unicode等效项,这与图标在上下文中的含义不符,或更糟糕的是,这简直令人困惑

使用Font Awesome CDN自动辅助功能

令人欣慰的Font Awesome CDN可帮助您更轻松地自动实现对辅助功能的支持,因此您的图标可以为大多数人使用。 您只需要打开一个设置,使用我们的简单语法,您使用的任何图标就会自动应用以下所有最佳实践。

或者

手动使图标可访问

在用户界面中使用图标时,有一些手动技术和方法可以帮助辅助技术忽略或更好地理解Font Awesome。

用于纯装饰或视觉样式的图标

如果您使用图标来添加一些额外的装饰或品牌,则无需在用户以听觉方式浏览您的网站或应用时向用户宣布该图标。 此外,如果您使用图标在视觉上重新强调HTML或在HTML中已经存在的内容添加样式,则无需对使用辅助技术的用户重复使用该图标。 您可以通过将aria-hidden="true"添加到您的Font Awesome标记中来确保不会被读取。

<i class="fa fa-fighter-jet" aria-hidden="true"></i>
用作纯装饰的图标
<h1 class="logo">
  <i class="fa fa-pied-piper" aria-hidden="true"></i>
  Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
</h1>
用作徽标(Logo)的图标
<a href="https://github.com/FortAwesome/Font-Awesome"><i class="fa fa-github" aria-hidden="true"></i> View this project's code on Github</a>
链接文本前面使用的图标

具有语义或互动目的的图标

如果您使用图标来传达含义(而不只是作为装饰元素),请确保也将这种含义传达给辅助技术。 这适用于您通过图标以及交互式控件(按钮,表单元素,切换键等)缩写的内容。 有几种技术可以做到这一点:

如果图标交互式元素

提供替代文本的最简单方法是在图标上使用aria-hidden="true"属性,并在文本中包含其他元素(例如<span>)和适当的CSS,以在视觉上隐藏该元素,同时保留 它可以使用辅助技术。 此外,您可以在图标上添加标题title属性,以为有视力的鼠标用户提供工具提示。

<dl>
  <dt>
    <i class="fa fa-car" aria-hidden="true" title="Time to destination by car"></i>
    <span class="sr-only">Time to destination by car:</span>
  </dt>
  <dd>4 minutes</dd>

  <dt>
    <i class="fa fa-bicycle" aria-hidden="true" title="Time to destination by bike"></i>
    <span class="sr-only">Time to destination by bike:</span>
  </dt>
  <dd>12 minutes</dd>
</dl>
用于传达出行方式的图标
<i class="fa fa-hourglass" aria-hidden="true" title="60 minutes remain in your exam"></i>
<span class="sr-only">60 minutes remain in your exam</span>

<i class="fa fa-hourglass-half" aria-hidden="true" title="30 minutes remain in your exam"></i>
<span class="sr-only">30 minutes remain in your exam</span>

<i class="fa fa-hourglass-end" aria-hidden="true" title="0 minutes remain in your exam"></i>
<span class="sr-only">0 minutes remain in your exam</span>
用于表示剩余时间的图标

如果图标代表互动元素

对于可聚焦的交互式元素,有多种选择可包括元素的替代文本或标签,而无需任何视觉上隐藏的<span>或类似内容。 例如,仅将带有文本描述的aria-label属性添加到交互式元素本身就足以为元素提供可访问的替代名称。 如果需要在鼠标悬停/焦点上提供可视化的工具提示,建议您另外使用title属性或自定义工具提示解决方案。

<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart">
  <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>
用于传达购物车状态的图标
<a href="#navigation-main" aria-label="Skip to main navigation">
  <i class="fa fa-bars" aria-hidden="true"></i>
</a>
用作导航菜单链接的图标
<a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
  <i class="fa fa-trash-o" aria-hidden="true" title="Delete this item?"></i>
</a>
一个图标,该图标用作带有title属性的删除按钮符号,以提供本机鼠标工具提示
  • 查看有关如何在用户界面中添加具有辅助功能的图标的更多示例

尽管此处的场景和技术有助于避免一些严重的问题和混乱,但它们并不详尽。 关于可访问性,存在许多复杂的上下文和用例,例如视力低下的用户需要较高的颜色对比度才能看到UI。 这里有一些很棒的工具和资源可供学习和使用。 这是我们推荐的一些读物。

我们将在更大的可访问性主题下继续进行这些工作,但与此同时, 让我们知道是否有任何错误或问题


Font Awesome拥有一个充满活力的社区,彼此帮助。 您可以 获得帮助提交Bugs查询新图标提交或拉取代码,并且 检查即将到来的里程碑

无法启动和运行Font Awesome吗? 某些功能未按您认为的方式工作? 我讨厌那个 我没有时间再去回答Font Awesome的支持电子邮件。 因此,您可能需要执行以下操作:

  1. 确保您已阅读有关快速入门的最新版本。 它最近进行了更新,以使Font Awesome更加易于使用。
  2. 查看stackoverflow上Font Awesome相关标签的问题 ,其他人可能也有过与您相同的问题。

新图标通常根据GitHub上的Font Awesome社区的请求开始。 要请求一个新图标吗? 这里要记住以下一些事情:

  1. 请友好一点。 Font Awesome是一个快乐的地方。
  2. 搜索这里 查看您的图标请求是否已经存在。 如果找到已存在图标,请不吝点赞。
  3. 请按照要求提供单个图标,除非您要请求几个严格相关的图标(例如,thumbs-up/thumbs-down)。
  4. 如果您包括以下内容,请多谢:
  5. 请求具体对象:制作图标代表快乐比较困难,制作笑脸更容易。

发现Font Awesome有问题? 随时在GitHub项目上提交问题。 但是请记住以下几点:

  1. 请友好一点。Font Awesome是一个快乐的地方。
  2. 搜索这里,查看是否已报告您的错误Bugs。
  3. 在打开任何问题之前,请阅读通用的issue guidelines, by Nicolas Gallagher.
  4. 完成上述所有操作后,可以随时提交一个issue.
找到解决Font Awesome中错误的方法了吗? 是否想贡献新功能? 这里有几件事要记住:
  1. 请不要提交新图标。
  2. 请针对*-wip分支提交所有请求请求。
  3. 向master提交的所有拉取请求将立即关闭,并参考本指南。
  4. 完成上述所有操作后,可以随时提交拉取请求

是否想跟上Font Awesome的计划?查看GitHub项目上的里程碑


Font Awesome是完全开源的,并且对GPL友好。 您可以将其用于商业项目,开源项目,或几乎任何您想要的项目。

  • 自从Font Awesome 3.0起,不再需要注明出处,但深表感谢: “Dave Gandy的Font Awesome - fontawesome.io”。
  • 适用于以下目录中的所有电脑桌面字体文件和web应用字体文件: font-awesome/fonts/.
  • 协议: SIL OFL 1.1
  • 网址: http://scripts.sil.org/OFL
  • 所有品牌图标均为其各自所有者的商标。
  • 使用这些商标并不表示Font Awesome对商标持有人的认可,反之亦然。
  • 品牌图标应仅用于代表其所引用的公司或产品。
  • 除代表特定品牌或服务外,请勿将品牌徽标用于任何目的。

感谢 @robmadole@supercodepoet 对图标的设计,审查,建议,以及一些Jekyll帮助和周边技术的辅助代码贡献者。

非常感谢@gtagliala在管理Font Awesome GitHub 项目上的拉取请求和问题方面做得非常出色。

感谢MaxCDN提供了出色的BootstrapCDN,它是最快,最简单的上手Font Awesome的方法。

置顶