iconfont 图标库的使用整理（二）

在线iconfont的使用

在这里我还是分三种情况介绍

1.Unicode 

这种方法下的在线引用首先还是要去阿里巴巴iconfont图标库里下载图标文件

解压后，有很多的文件，这次我们不需要全部引用，只需要引用iconfont.css

在编辑器中打开这个iconfont.css文件，然后我们看到了如下情况：

iconfont.css头部文件的引入路径（本地）

我们去iconfont图标库里找到Unicode下的 查看在线链接 点此复制之后去项目里找到如上图所示的@font-face{.......}然后进行替换，注意还要将替换的路径加上http:才会生效哦！如下图：

iconfont.css头部文件的引入路径（在线）

之后我们在html文件里正常使用即可。

<span class="iconfont-2018">&#59173</span>

2.Font class 

font-class这种方法是直接引用线上的iconfont链接。

也是同样的方法去iconfont图标库里复制链接

再去html里link引入即可。

font-class头部文件的引入路径（在线)

之后也是和之前相同的使用：

<span class="iconfont-2018  icon-2018-pc"></span>

3.Symbol 

这种方法是直接引用线上的iconfont链接。

也是同样的方法去iconfont图标库里复制链接，注意此处的iconfont链接.js

所以在html里用script引入。

symbol引入路径（在线)

之后也是和之前相同的使用：

<svg class="icon" aria-hidden="true">

        <use xlink:href="#icon-2018-tu"></use>

 </svg>

在使用symbol方式的时候还是可以使用彩色的图标。

在使用这些在线的图标库链接时，如果图标库有更新时，需要时时更新这些引用的链接，以此来保证图标的正常使用哦！