FontAwesome字体图标库

发表于 | 分类于





为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。








一个字库，519个图标


仅一个Font Awesome字库，就包含了与网页相关的所有形象图标。


无需依赖JavaScript


Font Awesome完全不依赖JavaScript，因此无需担心兼容性。


无限缩放


无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的图标。


如言语一般自由


Font Awesome完全免费，哪怕是商业用途。。


CSS控制


只要CSS支持，无论颜色、大小、阴影或者其它任何效果，都可以轻易展现。


高分屏完美呈现


Font Awesome的矢量图标，将使您的网站在视网膜级的高分屏上大放异彩。


完美兼容其它框架


尽管是为Bootstrap设计，但Font Awesome同样能与其它框架完美协同运作。


可用于桌面系统


用于桌面系统，或需要一套完整的矢量图，请查看备忘。


可适配于屏幕阅读器


与其它字体不同，Font Awesome不会影响屏幕阅读器正常工作。



使用方式


1. 引入库文件
1
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />

2. 加入对应的类型class，显示效果：

1
<i class="fa fa-flag">i>

3. 加入对应的尺寸class，显示效果：

1
2
3
4
5
<i class="fa fa-flag fa-lg">i>
<i class="fa fa-flag fa-2x">i>
<i class="fa fa-flag fa-3x">i>
<i class="fa fa-flag fa-4x">i>
<i class="fa fa-flag fa-5x">i>

4. 加入对应的动画class，显示效果：

1
<i class="fa fa-flag fa-spin">i>

5. 加入对应的旋转或翻转class，显示效果：

1
2
3
4
5
<i class="fa fa-flag fa-rotate-90">i>
<i class="fa fa-flag fa-rotate-180">i>
<i class="fa fa-flag fa-rotate-270">i>
<i class="fa fa-flag fa-flip-horizontal">i>
<i class="fa fa-flag fa-flip-vertical">i>

6. 加入对应的组合class，显示效果：

1
2
3
4
<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>

下载链接

  1. github
  2. dashgame

需要支持IE7?

  1. fontawesome.io
  2. thinkcmf

许可协议

  1. 字体：License: SIL OFL 1.1
  2. 代码：License: MIT License
  3. 文档：License: CC BY 3.0
  4. 标志：所有标志图标都分别是其所有者的注册商标，使用这些商标并不代表Font Awesome拥有它们。