我们的系统中自带集成了font-awesome字体图标库，所以在模板设计制作中也可以充分利这些字体图标，运用到实际需求中，下面分享一下前端输出和设计时如何使用font-awesome字体图标库：

官网：http://www.fontawesome.com.cn/

一、前端：

首先在模板中引用font-awesome.css文件

<link href="~/content/_common/assets/content/font-awesome.css" asp-append-version="true" rel="stylesheet" />

1、基础用法

基础用法，设置前缀fa和图标的具体名称

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

2、图标大小控制

增加图标大小相对于它们的容器, 使用 fa-lg (33% 递增)

<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

3、固定图标的宽度

使用 fa-fw 来设置图标在一个固定宽度内，主要用于不同宽度图标无法对齐的情况

<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>  首页</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>  关于我们</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>  后台应用编辑</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>  系统设置</a>
</div>

4、图标旋转动画

使用 fa-spin 使任意图标旋转，还可以使用 fa-pulse 使其进行8方位旋转。尤其适合 fa-spinner, fa-refresh, 和 fa-cog。

<i class="fa fa-spinner fa-spin fa-fw"></i>
<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-fw"></i>
<i class="fa fa-cog fa-spin fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-fw"></i>

5、图标任意旋转和翻转

任意旋转和翻转, 可以使用 fa-rotate-* and 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

6、图标的组合

图标组合起来，使用fa-stack类，作为父容器，fa-stack-1x作为正常比例的图标，fa-stack-2x作为大一些的图标

<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矢量图标

Figma用户可以社区直接搜插件 font- Awesom图标库拿来使用

Ps、Ai等设计软件用户可以下载font-Awesome安装包，在电脑中安装fontAwesome.otf字体，然后复制图标后黏贴使用。

矢量图标库地址：http://www.fontawesome.com.cn/cheatsheet

像复制文本一样，只需要复制图标，再回到ps或ai粘贴即可

三、项目中的运用

1、焦点图中的左右按钮

2、文章内容页中的打印按钮

3、当前位置的小图标