2019-11-09

Font Awesome 图标

前言

Font Awesome 是一套绝佳的图标字体库和 CSS 框架。

1、Font Awesome

Font Awesome 提供可缩放的矢量图标，可以使用 CSS 所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
Font Awesome 从 4.1.0 版本开始不再支持 IE7，但更早的版本仍然支持。可以查看 3.2.1 的 IE7 支持说明。
相关网站：

2、安装

2.1 使用 CDN

要使用 Font Awesome 图标，在 HTML 页面的 <head> 部分中添加以下行。

国内推荐使用 Staticfile CDN 上的库：

1	<link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

海外推荐 cdnjs 上的库：

1	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

2.2 使用 Bootstrap CDN

一句话将 Font Awesome 加入到网页中。完全不用下载或者安装任何东西，由 MaxCDN 提供。

将以下代码粘贴到网页 HTML 代码的 <head> 部分。

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

2.3 直接下载到本地

下载地址：
- Font Awesome v4.7.0
- Font Awesome v3.2.1
复制整个 font-awesome 文件夹到项目中。

在 HTML 的 <head> 中引用 font-awesome.min.css。

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

2.4 使用 LESS Ruby Gem

使用官方 Font Awesome LESS Ruby Gem 可以简单方便的将 Font Awesome LESS 集成到 Rails 项目中。由 @supercodepoet 维护。
将下面这行代码加入到应用的 Gemfile 中：
1
gem 'font-awesome-less'
然后执行：
1
$ bundle
或者自行安装：
1
$ gem install font-awesome-less

2.5 使用 SASS Ruby Gem

使用官方 Font Awesome SASS Ruby Gem 可以简单方便的将 Font Awesome SASS 集成到 Rails 项目中。由 @supercodepoet 维护。
将下面这行代码加入到应用的 Gemfile 中：
1
gem 'font-awesome-sass'
然后执行：
1
$ bundle
或者自行安装：
1
$ gem install font-awesome-sass

2.6 自定义 LESS 或 SASS

使用 LESS 或 SASS 的方法来自定义 Font Awesome 4.7.0 。
复制 font-awesome/ 目录到项目中。
打开 font-awesome/less/variables.less 文件或 font-awesome/scss/_variables.scss 文件，然后修改 @fa-font-path 或 $fa-font-path 为您的字体目录。
1
@fa-font-path: "../font";
字体路径是相对于编译的 CSS 目录。
如果使用了静态编译器，那么重新编译 LESS 或 SASS 文件。如果没有，那么现在应该一切 OK 了。

3、使用

可以将 Font Awesome 图标使用在几乎任何地方，只需要使用 CSS 前缀 fa，再加上图标名称。
1
Font Awesome 是为使用内联元素而设计的。更喜欢使用 ，因为它更简洁。但实际上使用  才能更加语义化。
如果修改了图标容器的字体大小，图标大小会随之改变。同样的变化也会发生在颜色、阴影等其它任何 CSS 支持的效果上。

实例

1
2
3

<head>
    <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
</head>

<i class="fa fa-camera-retro"></i>

<i class="fa fa-camera-retro" style="font-size: 40px;"></i>
<i class="fa fa-camera-retro" style="font-size: 60px; color: red;"></i>

效果

3.1 大图标

使用 fa-lg (33% 递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类来放大图标。
如果图标的底部和顶部被截断了，您需要增加行高来解决此问题。

实例

1
2
3

<head>
    <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
</head>

<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>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>

效果

3.2 固定宽度

使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。尤其在列表或导航时起到重要作用。

实例

1
2
3

<head>
    <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
</head>

<div>
    <a href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
    <a href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
    <a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
    <a href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

效果

Home
Library
Applications
Settings

3.3 用于列表

使用 fa-ul 和 fa-li 便可以简单的将无序列表的默认符号替换掉。

实例

1
2
3

<head>
    <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
</head>

<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>

效果
- List icons
- can be used
- as bullets
- in lists

3.4 边框与对齐

使用 fa-border 以及 pull-right 或 pull-left 可以轻易构造出引用的特殊效果。

实例

1
2
3

<head>
    <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
</head>

<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.

3.5 动画

使用 fa-spin 类来使任意图标旋转，还可以使用 fa-pulse 来使其进行 8 方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog。
CSS3 动画不支持 IE8-IE9。

实例

1
2
3

<head>
    <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
</head>

<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>
<i class="fa fa-spinner fa-pulse"></i>

效果

3.6 旋转与翻转

使用 fa-rotate-* 和 fa-flip-* 类可以对图标进行任意旋转和翻转。

实例

1
2
3

<head>
    <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
</head>

<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> icon-flip-vertical

效果

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

3.7 组合

如果想要将多个图标组合起来，使用 fa-stack 类作为父容器，fa-stack-1x 作为正常比例的图标，fa-stack-2x 作为大一些的图标。
还可以使用 fa-inverse 类来切换图标颜色。可以在父容器中通过添加大图标类来控制整体大小。

实例

1
2
3

<head>
    <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
</head>

<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" style="color: red;"></i>
</span>
fa-ban on fa-camera

效果

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

3.8 使用 Unicode 编码设置图标

可以使用 Unicode 图标编码的方式，而不是 “fa + 图标名称” 的方式设置 Font Awesome 图标。
1
Unicode 图标编码

实例

1
2
3

<head>
    <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
</head>

1	<i class="fa"></i>

效果

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-09 20:01

Qian Chia's Blog

赞助

搜索

分类

标签