Font Awesome 矢量图标使用

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

## Font Awesome

<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：December 22nd, 2020 at 08:05 pm

如果你想请我喝奶茶的话

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

为你的博客添加一个萌萌哒的看板娘吧
浏览次数: 24565
网易云日推
浏览次数: 23297
氛围音乐
浏览次数: 18737
OneManager搭建网盘详细过程
浏览次数: 7546
在回忆里，我们永远是恋人
浏览次数: 5641

乐乐
支持下看看！！！！
Anakin
API、博客、主页。。。所有的🤣
Anakin
ssl过期啦
老刘
好看，品味审美都在线
r43g
5a单号网快递购买 5a空包代发网www.5adanhw.com

Font Awesome 矢量图标使用

爆胎 • 2020 年 06 月 03 日

## Font Awesome

## 基本使用

**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搭建网盘详细过程

在回忆里，我们永远是恋人

CentOS7启用腾讯TCPA拥堵算法

Win10最强组合下载工具推荐

L2TP连接尝试失败

一起摇摆 (((((ી(･◡･)ʃ)))))

OLAINDEX 5.0 世纪互联

Font Awesome 矢量图标使用