内容简介:最近在使用在Element-UI的时候发现其图标太少了,连常用的reset,people之类的图标都没有,于是想引入第三方的图标库进行使用。在网上查找了资料后成功引入,下面就是我的引入流程:这里我选择的是阿里巴巴的Iconfont,打开
最近在使用在Element-UI的时候发现其图标太少了,连常用的reset,people之类的图标都没有,于是想引入第三方的图标库进行使用。在网上查找了资料后成功引入,下面就是我的引入流程:
这里我选择的是阿里巴巴的Iconfont,打开 https://www.iconfont.cn/ ,创建账号,然后选择你要引入的图标(加入购物车)
点击添加至项目,然后新建一个项目
点击跟多操作修改项目前缀,不能为 el-icon-
,因为这个可能会和Element-UI自带的图标重合
点击生成在线CSS代码,
复制代码链接,在项目的APP.vue中引入,这时我们就可以通过 class="iconfont el-icon-mo-xxx"
的方式在项目中使用引入的第三方图标了,如果想要去掉 iconfont
这个类直接用 el-icon-mo-xxx
来使用图标的话我们还需要多一步操作:
<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> @import "//at.alicdn.com/t/font_1075796_5kpx2vwkmq3.css"; [class^="el-icon-mo"], [class^=" el-icon-mo"] { font-family: "iconfont", serif !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style>
PS
每次新增或删除,特别是新增如果要引入新增的图标,要重新生成CSS文件,这时候需要把新生成的CSS文件链接重新在 App.vue
中引入,替换掉原来的链接。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Mozilla Firefox 70.0 Beta 11 发布:引入全新图标
- c# – 如何将两个图标合并在一起? (在另一个图标上叠加一个图标)
- Bootstrap 图标集 v1.2.0 发布 —— 喜提 CSS 图标字体!
- Bootstrap 图标集 v1.2.0 发布 —— 喜提 CSS 图标字体!
- 9012年了你还在用单色图标?(iconfont多色图标详解)
- 开源图标字体 uiw-iconfont v1.2.6 发布,新增图标
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。