首先得吐槽一下,elementUI提供的icon太少啦。因此,需要更多的icon图标。
推荐使用阿里妈妈MUX倾力打造的矢量图标管理、交流平台iconfont:
http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
进入后可以看到:

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

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


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


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

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

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

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

终于完成啦~
最后成果图
网友评论