美文网首页Vue+Vuex+Electron+ElementUI 开发
Element UI 使用自定义图标(字体类型图标)

Element UI 使用自定义图标(字体类型图标)

作者: 望穿秋水小作坊 | 来源:发表于2018-12-06 12:02 被阅读534次

    最近在使用 VUE+Electron+ElementUI 做 pc 端应用。遇到一个小问题,在此记录一下。

    Element 控件

    Element UI 提供了如此优秀的控件库,但是我们得根据自己项目的需求进行图标替换。这时候问题来了,我们看下 Element 的代码吧。

    <template slot="title">
         <i class="el-icon-location"></i>
         <span>导航一</span>
     </template>

    清楚的看到“el-icon-location”就是这个图标的控制入口,初次接触用 class 来控制图标的方式,不免觉得困惑。这时候我们可以更换 class 来实现更换图标,但是这里仅仅支持 el 自带的 icon 库。http://element-cn.eleme.io/#/zh-CN/component/icon 这个链接可以看到 el 自带的所有图标库,还是蛮强大的,如果能在里面找到合适的图标,那你非常幸运,直接写上相应的类名就可以啦。

    接下来我会图文并茂的表达如何生成、引入、使用自定义的图标库。


    第一步:找 UI 拿到 svg 图标。如下图一样的文件。

    资源

    第二步:上阿里妈妈网站 http://www.iconfont.cn ,注册并创建自己的项目。

    第三步:上传 svg 图标到我的项目中。下载项目文件:

    你会得到如下文件,把红框内文件拖入 vue 项目中。

    第四部:引入自定义的资源,我的项目是在 index.ejs 中引入的。

    css 引入

    5.在 iconfont 文件中查看可以使用的样式名:

    自定义的 class 名称

    6.在Element UI 里面使用对应的 class:

    代码应用方式(别忘记了 iconfont )

    7.效果展示

    实现效果

    哈哈哈哈,这个流程里面,虽然还有些地方我也不是很理解,但是终于把目的达到了。欢迎有疑惑的小伙伴,或者更有经验的小伙伴留言交流。

    如果对你有帮助,记得帮忙点个赞哟。😀

    相关文章

      网友评论

        本文标题:Element UI 使用自定义图标(字体类型图标)

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