CSS图标使用教程

使用Font Awesome^[1]创建可缩放的矢量图标，你可以利用CSS提供的所有特性对它们进行更改，包括大小、颜色、阴影或者其它任何支持的效果，使用方式也非常简单：

从官网下载图标库然后解压到自己的项目目录下，或者直接引用其在线版本（4.x版本）：
1
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
现在你可以将Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀fa，再加上图标名称，Font Awesome是为使用内联元素而设计的，通常大家喜欢使用标签，不过使用或许语义上更合理：
1

可以使用fa-spin类来使任意图标旋转，或者使用fa-pulse来使其进行8方位旋转，尤其适合fa-spinner、fa-refresh和fa-cog这三种图标：

1 2	<i class="fa fa-spinner fa-spin"></i> <i class="fa fa-spinner fa-pulse"></i>

Font Awesome只支持旋转动画，不过你可以利用font-awesome-animation扩展更多的动画效果，具体可以参见之前的笔记#动画图标，这里简单说一下，引入其在线地址：

1	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@1.1.1/css/font-awesome-animation.min.css">

将faa-xxx animated类添加到任意图标上，其中xxx是具体的动画名称，譬如扳手动效：

1	<i class="fa fa-wrench faa-wrench animated"></i>

使用fa-lg（33%递增）、fa-2x、fa-3x、fa-4x，或者fa-5x类来放大图标：

1	<i class="fa fa-camera-retro fa-2x"></i>

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

1
2
3

<i class="fa fa-shield-alt fa-rotate-90"></i>
<i class="fa fa-shield-alt fa-flip-horizontal"></i>
<i class="fa fa-shield-alt fa-flip-vertical"></i>

如果想要将多个图标组合起来，使用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>
<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>
<span class="fa-stack fa-lg">
    <i class="fa fa-camera fa-stack-1x"></i>
    <i class="fa fa-ban fa-stack-2x"></i>
</span>

在伪元素中使用图标：

.calendar::before {
    font-family: "FontAwesome";
    content: "\f274";
}

注：更多说明请见官网，以上示例俱来自其中

5.x版本

fa前缀在5.x版本中已弃用，新的默认设置是实心的fas样式和品牌的fab样式，你可以在地址查找相关的图标类名

在线引入：

1	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">

图标示例：

1 2	<i class="fas fa-frog"></i> <i class="fab fa-facebook"></i>

不同于4.x，如果基于5.x在伪元素中使用图标，font-family应取值为Font Awesome 5 Free：

.calendar::before {
    font-family: "Font Awesome 5 Free";
    content: "\f274";
}

打开阿里巴巴矢量图标库官网^[2]，挑选自己需要的图标，添加到项目中，生成项目链接后，就可以像Font Awesome那样，通过font-class引用：

拷贝项目下生成的fontclass文件链接：

1	<link rel="stylesheet" href="https://at.alicdn.com/t/font_2811393_pyr8mvclqjm.css">

使用CSS前缀iconfont，再加上指定的图标类名icon-xxx即可：
1

重新隐藏

在伪元素中使用：

.telephone::before {
    font-family: "iconfont";
    content: "e87f";
}

或者通过symbol引用，这种方式支持多色图标，不再受单色限制：

拷贝项目下生成的symbol文件链接：

1	<script src="https://at.alicdn.com/t/font_2811393_pyr8mvclqjm.js"></script>

加入通用CSS代码：

<style type="text/css">
    .icon {
        width: 1em; height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
     }
 </style>

挑选相应图标并获取类名：

1
2
3

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-dianhua1"></use>
 </svg>

此外，阿里矢量图标库还支持上传自己（绘制）的图标，只需准备一个SVG格式图片，然后上传并添加到项目中，即可使用，示例：

<script src="https://at.alicdn.com/t/font_2845452_wisxctml5x.js"></script>
...
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-muggledy"></use>
</svg>

从EmojiXD官网^[3]复制常见的unicode符号： 👨‍💻 🍺，可直接用于伪元素：

1
2
3

.cherry::before{
    content: "🍒";
}

[1] Font Awesome图标字体库
[2] 阿里巴巴矢量图标库官网
 [3] EmojiXD表情符号