Font Awesome 矢量图标使用

Author：爆胎
发布时间：June 3, 2020
3265 views
7 comments
3225 words
Categories：学习

<code>Font Awesome</code> 是为 <code>Twitter Bootstrap </code>设计的图标字体，通过<code>Web Font</code>的方式来显示一些图标，好处是图标可以被任意缩放、改变颜色，你需要做的只是像修改文字样式那样修改图标样式，现在非常多的网站还有博客都是使用的这套图标
![](https://img-1259793745.itggg.cn/20201222200257.jpg)

## 基本使用

**1**.在站点的在<code>head</code>处引入官方的<code>font-awesome.min.css</code>

```
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
```

&nbsp;
**2**.其他博客或者网站就在你的<code>header</code>头部引入就可以了，如图

![](https://img-1259793745.itggg.cn/20201222200258.jpg)

&nbsp;
**3**.<code>Handsome</code>主题直接在：设置外观-开发者设置-自定义输出<code>header</code>头部的<code>HTML</code>代码
![](https://img-1259793745.itggg.cn/20201222200259.jpg)

&nbsp;
**4**.引入完成，就去这个图标库里去找你想要的图标 &nbsp;&nbsp;&nbsp; [图标库](http://www.fontawesome.com.cn/faicons/)
然后复制下来这串代码，然后就可以把这个 <code>i </code>标签放在任何位置。

![](https://img-1259793745.itggg.cn/20201222200300.jpg)

&nbsp;
**5**.举个栗子 <img src="https://www.itggg.cn/usr/themes/handsome/assets/img/emotion/aru/meditation.png" class="emotion-aru"> 比如我要在我博客右侧的统计信息评论前面加上这个图标，就找到这个部分的源码，然后找合适的位置粘贴进去就行，当然也可以直接在现有的<code>class</code>里去添加，在现有的<code>class</code>添加就只用 <code>“fa fa-grav” </code>就可以了，如果要替换现有的图标直接在现有的<code>class</code>修改

[album]

![](https://img-1259793745.itggg.cn/20201222200301.jpg)
![](https://img-1259793745.itggg.cn/20201222200302.jpg)
![](https://img-1259793745.itggg.cn/20201222200303.jpg)
[/album] </div>
&nbsp;

## 进阶使用

下面是一些参数使用方法，如放大，翻转，动态等，使用的时候直接在基础用法的后面加参数，详情请看代码部分
</div>

&nbsp;

### 1.图标放大

为了增加图标大小相对于它们的容器，使用<code>fa-lg（33％递增）</code>
<code>fa-2x， fa-3x，fa-4x</code>或<code>fa-5x</code>类。
 fa-lg
 fa-2x
 fa-3x
 fa-4x
 fa-5x

```
 fa-lg
 fa-2x
 fa-3x
 fa-4x
 fa-5x
```

&nbsp;
&nbsp;

### 2.旋转并翻转

若要对图标进行任意旋转和旋转，可以使用<code>fa-rotate*</code>和<code>fa-flip-*</code>类
 normal&nbsp;&nbsp;&nbsp; fa-rotate-90&nbsp;&nbsp;&nbsp; fa-rotate-180&nbsp;&nbsp;&nbsp; fa-rotate-270 fa-flip-horizontal&nbsp;&nbsp;&nbsp; fa-flip-vertical

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

&nbsp;
&nbsp;

### 3.组合图标

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

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
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
```

&nbsp;
&nbsp;

### 4.动态图标

先引入一个<code>css</code>动画，引入方式和上面一样。使用这个<code>CSS</code>动画来实现动态图标，使用<code>fa-spin</code>使任意图标种植旋转，可以还使用<code>fa-pulse</code>使其进行方位旋转

```
<link rel="stylesheet" href="https://itggg.cn/cdn/font-awesome-animation.min.css">
```

&nbsp;
<div class="tip inlineBlock info">

**旋转类**
</div>

Loading...Loading...Loading...Loading...Loading...

```

Loading...

Loading...

Loading...

Loading...

Loading...
```

&nbsp;
&nbsp;
<div class="tip inlineBlock info">

其他13种动画效果，序号请参照下方代码
</div>

```













```

&nbsp;
&nbsp;
<div class="tip inlineBlock info">

鼠标点击动态，修改默认的动态参数 &nbsp;&nbsp; animated
</div>

参数说明：<code>animated</code> &ensp;&ensp;循环动态
&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<code>animated-hover</code> &ensp;&ensp;鼠标移动到图标上动态

效果演示：移动鼠标到图标上
&nbsp;
&ensp;&ensp;|&ensp;&ensp;

```


```

&nbsp;

### 5.图标颜色

在 `class` 里加：`style="color:颜色"`即可

| |

```



```

&nbsp;
<div class="tip inlineBlock warning">

**怎么样？你学会了吗？**
</div>

Last modification：May 31, 2022

如果你想请我喝奶茶的话

7 comments

surpriselon
August 18, 2020

加了https访问成了500

Reply
1. 爆胎
  August 18, 2020
  
  @surpriselon
  
  啥500？官方的图标库啊
  
  Reply
筱咲
June 4, 2020

颜色怎么换？

Reply
1. 爆胎
  June 5, 2020
  
  @筱咲
  
  class 里加：style="color: "颜色代码"
  
  Reply
  1. Zi_Gao
    July 3, 2020
    
    @爆胎
    
    不是class里面加吧...在标签里面加才对吧
    
    Reply
    
    爆胎
    July 3, 2020
    
    @Zi_Gao
    
    一样的一样的
    
    Reply
哈哈
June 4, 2020

学习了

Reply

网易云日推
浏览次数: 63787
为你的博客添加一个萌萌哒的看板娘吧
浏览次数: 46816
氛围音乐
浏览次数: 46044
OneManager搭建网盘详细过程
浏览次数: 11032
渐变响应式 HTML5 导航页
浏览次数: 9218

熊猫不是猫
这个蛮不错的啊
熊猫不是猫
挺不错的博客啊
被窝
大佬导航栏主题色调能分享下嘛
白鹿
是不是欠费的钱不还会影响支付宝信誉什么的
白鹿
哥，字体接口怎么做可以出个教程吗

Font Awesome 矢量图标使用

爆胎 • 2020 年 06 月 03 日

## 基本使用

**1**.在站点的在<code>head</code>处引入官方的<code>font-awesome.min.css</code>

```
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
```

&nbsp;
**2**.其他博客或者网站就在你的<code>header</code>头部引入就可以了，如图

![](https://img-1259793745.itggg.cn/20201222200258.jpg)

![](https://img-1259793745.itggg.cn/20201222200300.jpg)

[album]

![](https://img-1259793745.itggg.cn/20201222200301.jpg)
![](https://img-1259793745.itggg.cn/20201222200302.jpg)
![](https://img-1259793745.itggg.cn/20201222200303.jpg)
[/album] </div>
&nbsp;

## 进阶使用

下面是一些参数使用方法，如放大，翻转，动态等，使用的时候直接在基础用法的后面加参数，详情请看代码部分
</div>

&nbsp;

### 1.图标放大

&nbsp;
&nbsp;

### 2.旋转并翻转

&nbsp;
&nbsp;

### 3.组合图标

```

 
 
fa-twitter on fa-square-o

fa-flag on fa-circle

fa-terminal on fa-square

fa-ban on fa-camera
```

&nbsp;
&nbsp;

### 4.动态图标

```
<link rel="stylesheet" href="https://itggg.cn/cdn/font-awesome-animation.min.css">
```

&nbsp;
<div class="tip inlineBlock info">

**旋转类**
</div>

```

Loading...

Loading...

Loading...

Loading...

Loading...
```

&nbsp;
&nbsp;
<div class="tip inlineBlock info">

其他13种动画效果，序号请参照下方代码
</div>

&nbsp;
&nbsp;
<div class="tip inlineBlock info">

鼠标点击动态，修改默认的动态参数 &nbsp;&nbsp; animated
</div>

```


```

&nbsp;

### 5.图标颜色

在 `class` 里加：`style="color:颜色"`即可

| |

```



```

&nbsp;
<div class="tip inlineBlock warning">

**怎么样？你学会了吗？**
</div>

Font Awesome 矢量图标使用

Leave a Comment Cancel reply

7 comments

网易云日推

为你的博客添加一个萌萌哒的看板娘吧

氛围音乐

OneManager搭建网盘详细过程

渐变响应式 HTML5 导航页

VA-11 HALL-A 赛博朋克

站点做一次Web并发测试

Nostalgia Drive - A Nostalgic Synthwave

Markdown 编辑器语法指南

CentOS7启用腾讯TCPA拥堵算法

Font Awesome 矢量图标使用