好用的图标字体Font Awesome

最后更新日期:2014-06-21 01:22:16



Font Awesome 是为一套图标字体,一开始是为 Twitter Bootstrap 而设计的。通过Web Font的方式来显示一些图标,好处是图标可以被任意缩放、改变颜色,你需要做的只是像修改文字样式那样修改图标样式。

一.Font Awesome 介绍

1.1 相关网址

Font Awesome的官网(英文,最新为4.10).
官网的GitHub.
Bootstrap中文网相关页面(中文,V3.0).

简单介绍和特性

这是3.0的介绍,4.10中增加了更多的图标:

  • 一个字体文件, 249 个图标
  • 一个字体文件包含了所有图标。Font Awesome 助你完整表达web页面上每个动作的含义。
  • 用CSS控制样式
  • 用CSS能非常容易的改变这些图标的颜色、大小、阴影以及任何CSS能控制的属性。
  • 无限缩放
  • 矢量图意味着每个图标都能在所有大小的屏幕上完美呈现。
  • 个人、商业均可自由使用
  • Font Awesome是完全免费的,无论个人还是商业使用。详见 协议。
  • 支持IE7+
  • Font Awesome支持IE7及以上浏览器。不过你要是必须用在这种过时的浏览器上话,我只能表示同情!
  • 在Retina屏幕上也能完美呈现
  • Font Awesome 中包含的都是矢量图标,在高分辨率的显示器上也能完美呈现。
  • 专为Bootstrap设计
  • Font Awesome是完全从头设计的整套图标,完全和Bootstrap 2.2.2版本兼容.
  • 设计师的助手
  • 安装 FontAwesome.otf 字体文件,然后在这个页面直接拷贝粘贴图标字符的代码就可以用于你的设计中了。
  • 兼容屏幕阅读器
  • Font Awesome 不会阻止屏幕阅读器,这和其他图标字体的行为方式完全不同。

二.Font Awesome 使用

与bootstrap集成:

参看这里.

与操作系统集成:
安装 FontAwesome.otf 文件到你的系统中。 然后,拷贝并粘贴图标字体的代码到你的草图或设计中就能看到效果了!

与其他应用集成

  1. 复制字体到项目目录.
  2. 复制 font-awesome.less 或者 font-awesome.min.css 到项目.
  3. 打开项目中的 font-awesome.less 或者 font-awesome.min.css ,并编辑指定字体位置到项目目录中的字体.
  4. 在项目中引用
    比如在页面的 head 里引入 font-awesome.min.css 文件:
    1
    2
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">

使用CDN与网站集成

在网站HTML的head标签中加入CDN的引用

1
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

这个主题chenall V2.0中,自带了Font Awesome的支持,在此主题中,只要使用标签<i> 就可以了.

比如:

1
<i class="fa fa-camera-retro"></i>照相机图标

显示效果为:
照相机图标

三.Font Awesome 示例

以4.10版本为例,语法和3.0的稍有不同

调整图标大小

1
2
3
4
5
6
<i class="fa fa-camera-retro"></i> 原始大小
<i class="fa fa-camera-retro fa-lg"></i> 大图标
<i class="fa fa-camera-retro fa-2x"></i> 2倍大小
<i class="fa fa-camera-retro fa-3x"></i> 3倍大小
<i class="fa fa-camera-retro fa-4x"></i> 4倍大小
<i class="fa fa-camera-retro fa-5x"></i> 5倍大小

显示效果为:

原始大小
大图标
2倍大小
3倍大小
4倍大小
5倍大小

动画图标

fa-snpin

1
2
3
4
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh icon-spin"></i>
<i class="fa fa-cog icon-spin"></i>

显示效果为:



固定宽度图标

1
2
3
4
5
6
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; 主页</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; 参考</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; 应用</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; 设置</a>
</div>

显示效果:

列表

1
2
3
4
5
6
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>列表图标</li>
<li><i class="fa-li fa fa-check-square"></i>可以象</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>提示符</li>
<li><i class="fa-li fa fa-square"></i>一样使用</li>
</ul>

  • 列表图标

  • 可以象

  • 提示符(Bulletes)

  • 一样使用

放大带边框

1
2
3
4
<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.


…tomorrow we will run faster, stretch out our arms farther…
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.

旋转图标

1
2
3
4
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>




方向

1
2
3
4
5
6
<i class="fa fa-shield"></i> 正常<br>
<i class="fa fa-shield fa-rotate-90"></i> 90度<br>
<i class="fa fa-shield fa-rotate-180"></i> 180度<br>
<i class="fa fa-shield fa-rotate-270"></i> 270度<br>
<i class="fa fa-shield fa-flip-horizontal"></i> 水平翻转<br>
<i class="fa fa-shield fa-flip-vertical"></i> 垂直翻转

正常

90度

180度

270度

水平翻转

垂直翻转

堆叠图标

后面的在上面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div>
<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
</div>






fa-twitter on fa-square-o





fa-flag on fa-circle





fa-terminal on fa-square





fa-ban on fa-camera

其他更多使用示例请查看官网.

##五.参考
Font Awesome的官网.
官网的GitHub.
Bootstrap中文网相关页面.

我也是刚刚开始学习,基本上都是官网上的东西,备忘一下