在vue项目中使用自定义的icon

首先得吐槽一下,elementUI提供的icon太少啦。因此,需要更多的icon图标。

推荐使用阿里妈妈MUX倾力打造的矢量图标管理、交流平台iconfont:
http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
进入后可以看到:

在vue项目中使用自定义的icon_第1张图片
还有彩色的呢

以下就是使用方法:

一、注册登录之后,进入到你喜欢的图标库,鼠标停留在想要的图标上,然后点击这个购物车添加入库。


在vue项目中使用自定义的icon_第2张图片
图1

二、选好想要的图标后,点击屏幕最右边悬浮的购物车按钮,会弹出一整个侧栏,点击添加至项目。


在vue项目中使用自定义的icon_第3张图片
图2-1

在vue项目中使用自定义的icon_第4张图片
图2-2

三、回到顶部,找到图标管理,点击我的项目。选择Font Class 之后 下载至本地。
在vue项目中使用自定义的icon_第5张图片
图3-1

在vue项目中使用自定义的icon_第6张图片
图3-2

四、下载完解压后把整个文件夹复制到项目中,文件夹的名字可以改。


在vue项目中使用自定义的icon_第7张图片
我是放在这里的

五、可以直接打开demo_fontclass.html,大大方便了使用。
在vue项目中使用自定义的icon_第8张图片
图5

六、滚到最下面有教如何使用,我之前想着在style标签里@import “”,结果一直报错,试了很多方法还是没用。看到使用方法后恍然大悟,反正这些都是要全局用的,干脆就直接在index.html引入算了,结果还真的可以了!
在vue项目中使用自定义的icon_第9张图片
图6-1

七、在全局都能使用,无需再引入。
在vue项目中使用自定义的icon_第10张图片
加在类里面

终于完成啦~


在vue项目中使用自定义的icon_第11张图片
最后成果图

你可能感兴趣的:(在vue项目中使用自定义的icon)