Vue 引用自定义图标iconfont

前提

准备好自己的字体图标，如果自己没法画出字体图标的（比如我） 可以到阿里公开图标库公开图标库 下载。

以下我们就来演示一下这波伸手党的操作

1：搜索图标

搜索图标

2：添加入库

图标添加入库

3：导出图标

导出图标这里选择下载代码

4：恭喜得到 种子 字体代码一枚

原材料有了，是时候该来条分割线进入正题了

---

正题

来，大家手摸手一起来

步骤一：Vue工程src/assets目录下建立一个新文件夹，随便命名 比如"custom-font"

步骤二：将iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff四个文件扔到刚才新建的目录下

步骤三：Vue工程src目录下新建一个文件夹随便命名,不过既然是全局都要用到的东西，就命名为app吧

步骤四：在刚才创建的app文件夹内新建一个app.scss文件

步骤五：将刚才下载下来的iconfont.css的内容复制到app.scss里面

是时候再来张图了

步骤六：对以上内容进行修改，请注意修改项

破图.jpg

上个破图我怎么复制？

OKOK，代码来了

首先

.iconfont{

......

}

替换成

[class^="el-icon-nb"], [class*=" el-icon-nb"]{

  font-family:"iconfont" !important;

  font-size: inherit;

  font-style:normal;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

其次

@font-face下面的url请换成正确的路径，比如我的就是"../assest/custom-font/"

这样文件才能正确被引用到

然后

最底下的.icon-xxxx开头的全部换成你自己喜欢的，比如.el-icon-nb-eye这样的（请注意跟上一步[class^="el-icon-nb"], [class*=" el-icon-nb"]的格式要一致） 然后要跟Element的图标库命名区分开，否则可能会那个啥你自己想。

接着

在main.js里面引入刚才的app.scss文件

大功告成了

最后

试一下效果吧！

像使用Element-icon一样去使用它

好了  这是全部了