美文网首页Vue
在vue项目中使用自定义的icon

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

作者: Lia代码猪崽 | 来源:发表于2017-12-11 22:33 被阅读40次

    首先得吐槽一下,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
    七、在全局都能使用,无需再引入。
    加在类里面

    终于完成啦~


    最后成果图

    相关文章

      网友评论

        本文标题:在vue项目中使用自定义的icon

        本文链接:https://www.haomeiwen.com/subject/pxiwixtx.html