在Element-UI中引入Iconfont图标

栏目: CSS · 发布时间: 5年前

内容简介:最近在使用在Element-UI的时候发现其图标太少了,连常用的reset,people之类的图标都没有,于是想引入第三方的图标库进行使用。在网上查找了资料后成功引入,下面就是我的引入流程:这里我选择的是阿里巴巴的Iconfont,打开

最近在使用在Element-UI的时候发现其图标太少了,连常用的reset,people之类的图标都没有,于是想引入第三方的图标库进行使用。在网上查找了资料后成功引入,下面就是我的引入流程:

这里我选择的是阿里巴巴的Iconfont,打开 https://www.iconfont.cn/ ,创建账号,然后选择你要引入的图标(加入购物车)

在Element-UI中引入Iconfont图标

点击添加至项目,然后新建一个项目

在Element-UI中引入Iconfont图标

在Element-UI中引入Iconfont图标

点击跟多操作修改项目前缀,不能为 el-icon- ,因为这个可能会和Element-UI自带的图标重合

在Element-UI中引入Iconfont图标

点击生成在线CSS代码,

在Element-UI中引入Iconfont图标

复制代码链接,在项目的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 中引入,替换掉原来的链接。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

银行3.0:移动互联时代的银行转型之道

银行3.0:移动互联时代的银行转型之道

[澳]布莱特·金(Brett King) / 白 宫 施 轶 / 广东经济出版社 / 2014-12 / 88.00元

银行未来会怎样,银行下一步该怎么做?银行如何在客户行为变化、科技变化,以及新的非银行竞争者不断涌入等时代变化的形势下,在未来取得成功? 这是第一本透彻深入地全面呈现当今银行业的内外形势与状况的书,内容涉及技术变化、客户行为变化、涌现的外部竞争者,银行现有组织架构、流程模式、制度思维、人员结构、互动渠道、营销方式等。具体包括低网点化,ATM、网站、呼叫中心的落伍,以及智能手机、社交媒体、移动支......一起来看看 《银行3.0:移动互联时代的银行转型之道》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具