梳理详细 vue中引入第三方字体图标库iconfont

    最近在项目中需要使用第三方图标库，我选择了阿里的iconfont。记录下学习过程。在网上查阅资料的时候，发现很多教程写的比较模糊，一些博主只是提供一种可实现的方式，但是并没有完全区分iconfont的几种引入方式及对应文件的作用，我一开始是有点混淆的，所以自己做了实践总结。

目录

1、在Iconfont网页上建立自己的项目

2、选择图标加入购物车

3、Vue工程中引入iconfont

3.1本地引入和链接引入区别

3.2 unicode引用

3.2.1 本地引入

3.2.2 链接引入

3.3 font-class引用

3.3.1 本地引入

3.3.2 链接引入

3.4 symbol引用

3.4.1 本地引入

3.4.2 链接引入

3.5总结

4、参考资料

---

1、在Iconfont网页上建立自己的项目

    打开官网：https://www.iconfont.cn/并登录。

    在首页选择【图标管理】-【我的项目】，

 

    进入项目管理页面。

    点击紫色按钮，新建项目，

    填写项目信息，即可完成新建一个项目。【FontClass/Symbol 前缀】和【Font Family】参数是自定义的，以后会与我们生成的代码相关联。

2、选择图标加入购物车

    新建好项目后，找到自己想要的图标，加入购物车。

    点击页面右上角的购物车图标，打开自己的购物车，选择添加至项目，我们就可以在自己的项目下看到添加的图标了。

    在我们的项目下，我们可以对图标进行编辑。

 

 

3、Vue工程中引入iconfont

    官方文档：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code

    有unicode引用、font-class引用、symbol引用三种引入方式，这三种方式又分有两种情况：下载到本地引入，在线链接引入。在Iconfont网页我们自己的项目下可以看到这些方式选择。

 

3.1本地引入和链接引入区别

    在讲三种引入方式之前先区分下本地引入和链接引入方式，避免混淆。

    本地引入就是将文件下载到本地，进行引用。如上图所示，点击【下载至本地】，就可以打包下载当前项目的文件资源，解压后的一些文件是没有用的，将下图选中的文件放到自己的工程中引用即可。（其实iconfont.css和iconfont.js分别对应font-class引用和symbol引用，所以不需要都放在项目中，根据自己的需要选择文件即可，我这里选中表示这几个文件是我们可能需要用到的。）。

 

    demo_index.html文件打开后是项目内容信息及教程。

 

    链接引入是使用平台提供的网络链接资源，不需要下载。在项目页面点击【查看在线链接】可以看到每种引入方式对应的代码。

3.2 unicode引用

 

    根据文档，unicode的方式我们只关注三个元素：font-face，iconfont样式以及unicode字体编码。

    @font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。属性详解参考：http://www.cnblogs.com/moqiutao/archive/2015/12/23/5070463.html。

    iconfont本质是一种特殊字体，所以可以通过font的相关属性去控制样式。第二步和第三步中的font-family就是创建项目时填写的Font Family的值。至于classname可以自己定，不一定要用.iconfont。样式中font-size属性控制字体图标大小，我们还可以通过color属性修改颜色。

    “3”的形式就是字体编码，在项目管理页面可以通过【复制代码】得到或者编辑查看。

 

3.2.1 本地引入

    unicode方式代码量少，并不需要下载本地文件。

3.2.2 链接引入

    Unicode模式下的在线链接指的是font-face代码。

    在vue中，将项目生成的font-face代码和自定义的iconfont样式写在App.vue的style中，就可以在项目中引用图标了。此时样式是全局作用的，如果想要实现图标不同的样式，可以增加一层自定义样式。

    <i class="iconfont myIconStyle">&#xe64a;</i>

    在”myIconStyle”样式中修改color等属性可以覆盖全局的样式，实现单个的样式修改。

    这里注意理解下，官方文档说的“不支持多色”，是指我们iconfont网页项目中，就算有多色图标，引用的时候会自动去色，统一变成默认的颜色，不管你给图标一编辑了红色图标二编辑了黄色，在项目中用unicode方式引用的时候都会变成默认颜色，但是我们仍然可以通过修改css样式实现图标颜色自定义，只是这个颜色编辑放在代码层面来了。

3.3 font-class引用

 

    如官方文档所说，font-class是为了让程序更加直观可读，直接用unicode会造成阅读困难。font-class模式关键在于生成的css文件。

3.3.1 本地引入

    上面已经介绍过下载本地文件的方式，按照下图选择文件放入自己的项目中，vue中建议在assets文件夹下新建一个iconfont文件夹，放相关文件。

 

    然后在main.js中引入iconfont.css文件，就可以正常使用了。

    import './assets/iconfont/iconfont.css'

    不支持多色的意思，font-class引用和unicode引用是一样道理，颜色和大小都可以自定义修改。

3.3.2 链接引入

    在index.html头部中，引入css文件即可

    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1160473_t1iruikumm.css">

3.4 symbol引用

 

    Symbol方式我们关注的是js文件。

3.4.1 本地引入

    将下载好的iconfont.js文件放入自己的工程目录，在main.js中引入，在App.vue中写好通用css代码，即可使用。

    import './assets/iconfont/iconfont.js'

    这里注意一点，下载下来的js文件是压缩过的，如果项目使用了eslint语法校验会疯狂报错，可以在js文件开头加入

    /* eslint-disable */来指定该文件不应用eslint校验。

3.4.2 链接引入

    在index.html头部中，引入js文件即可

    <script src="//at.alicdn.com/t/font_1160473_t1iruikumm.js"></script>

3.5总结

    symbol引用最受官方推荐，也是最优的方式，但是浏览器兼容不好，目前来看，前端需要兼容一些低版本的浏览器，所以如果考虑到用户使用，不建议采用symbol引用。

    unicode引用浏览器兼容最好，但是可读性差，font-class引用虽然兼容性比unicode引用差一点，但是提高可读性，综合来看，目前项目中还是采用font-class引用比较好。

    因为引用网络资源的不稳定，所以建议采用本地引入的方式。

    如果在图标库中新增加了图标，则需要更新在线链接并把该链接重新引入到实际项目中，或者重新下载代码到本地，然后在实际项目中引入最新的iconfont文件。

4、参考资料

    http://www.cnblogs.com/fashandian/p/6880892.html