字体图标的使用 FontAwesome以及iconfont的使用

Font Awesome

https://fontawesome.dashgame.com/

一、字体图标的引入方式

1、使用link标签引入

这个地址可以使用一些线上的CDN提供的文件地址；也可以把文件存到项目本地，然后使用本项目下的地址，只需要在HTML的head标签里加入下面的代码，就可以引入Font Awesome文件了

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

2、在CSS文件中引用

在CSS文件中引入的方式和第一种方式很类似，也是可以使用CDN地址，也可以使用项目本地地址。
引入的时候直接在CSS文件中按下面方式引用即可

@import '//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css';

3、以npm插件形式引入

如果是npm项目，可以直接使用npm安装font-awesome这个插件来使用

npm install font-awesome@4.7.0 --save

// main.js
import 'font-awesome/css/font-awesome.css'

二、具体使用

Font Awesome字体库被引入后，只需要在html中加入下面这样一个标签，即可显示出一个标签：

<i class="fa fa-address-book"></i>

这个标签的class里，fa是必须的，后面的fa-xxx就是用来指定显示哪个标签用的，https://fontawesome.dashgame.com/

iconfont的使用

https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

1.在iconfont官网中选中自己需要的icon,点击购物车

2.点击右上角购物车按钮，点击新建项目或者加入项目

3.打开我的项目，点击下载至本地

4.解压缩下载的内容，将图中的几个文件复制出来，放到项目中

5.打开iconfont.css文件，将绝对路径改为相对路径

6.因为全局都可能用到，所以在main.js中引用

7.具体使用：class =“iconfont”,中间的编码下图方式获取

<span class="iconfont ">&#xe602;</span>

补充：导出本地后，iconfont.css中没有base64格式

此时再重新下载，便会有base64的字体格式了