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

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

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

还有彩色的呢

以下就是使用方法:

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


图1

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


图2-1

图2-2

三、回到顶部,找到图标管理,点击我的项目。选择Font Class 之后 下载至本地。
图3-1

图3-2

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


我是放在这里的

五、可以直接打开demo_fontclass.html,大大方便了使用。
图5

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

七、在全局都能使用,无需再引入。
加在类里面

终于完成啦~


最后成果图
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容