elementui框架自带icon在开发大型前端应用时显得捉襟见肘。淘宝开源的iconfront的图标库上有很多优秀的icon图标。elementui支持整合iconfront到应用中，步骤如下：

  1. 首先需要在iconfront注册登陆，新建项目，然后把心仪的icon添加到项目中。



    )
  2. 接下来有两种做法，一种是在线链接，一种是下载解压后拷贝到本地的项目。
  • 在线链接方式如下

    新建一个iconfont.css文件，添加如下内容，el-icon-ali是第一步新建项目时给定的icon名前缀。
[class^="el-icon-ali"], [class*="el-icon-ali"]

{

  font-family:"iconfont" !important;

  font-size:16px;

  font-style:normal;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

接下来将iconfront项目提供的在线链接添加到vue项目的index.html中

<!DOCTYPE html>

<html>

<head>

    ...

    <link>

</html rel="stylesheet" href="//at.alicdn.com/t/font_1100946_7gqmadkiso5.css

">

在vue项目中的main.js中import刚才创建的iconfront.css

import Vue from 'vue'

import ElementUI from 'element-ui'

import './assets/.../../iconfront.css'

Vue.use(ElementUI)

添加新icon时，只要更新index.html中的链接即可

  • 下载导入方式

    解压下载出所有文件，拷贝到vue适当目录中，找到iconfront.css文件，一样添加如下内容
[class^="el-icon-ali"], [class*="el-icon-ali"]

{

  font-family:"iconfont" !important;

  font-size:16px;

  font-style:normal;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

接下来只要在vue项目中的main.js中import刚才创建的iconfront.css即可

import Vue from 'vue'

import ElementUI from 'element-ui'

import './assets/.../../iconfront.css'

Vue.use(ElementUI)

vue elementui 引入第三方icon iconfront的更多相关文章

  1. Vue Element-UI使用第三方icon图标（转）

    转载自:https://www.jianshu.com/p/59dd28f0b9c9 1.打开阿里icon,注册 >登录>图标管理>我的项目   2.新建项目 3. 添加icon到项 ...

  2. vue element-ui中引入第三方icon

    vue element-ui中引入第三方icon 把图标加入项目 设置项目名称,下载项目(项目名称自定义) 解压项目到开发目录 在main.js中全局引入css文件 修改下载下来的项目中的css文件, ...

  3. flutter 引入第三方 Icon 图标（以阿里图标库为例)

    在fluttter中引入第三方图标库的具体方法: 1.在阿里图标库选好需要用的图标,添加进购物车将选好的图标打包下载到本地(下载代码),复制iconfont.ttf文件到项目中 2.存放途径:lib/ ...

  4. vue项目引入第三方js插件，单个js文件引入成功，使用该插件方法时报错（问题已解决）

    1.引入第三方js文件,npm安装不了 2.控制台显示引入成功 3.在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=>{ var cd ...

  5. Vue中如何引入第三方icon库（阿里巴巴矢量图标库）

    1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车           ...

  6. vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标

    iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...

  7. vue 中引入第三方js库

    以 jQuery 为例 一.绝对路径直接引入,全局可用 主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1. ...

  8. Vue如何引入icon图标

             1.下载icon图标,推荐icomoon网站,里面有大量的矢量图标,也可以自定义,当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标.点击进入icomoon网站点击右上角“IcoM ...

  9. Vue+ElementUI的后台管理框架

    新开发的一个后台管理系统.在框架上,领导要用AdminLTE这套模板.这个其实很简单,把该引入的样式和js文件引入就可以了.这里就不多赘述了.有兴趣的可以参考:https://www.jianshu. ...

随机推荐

  1. Linux权限赋予远程连接MySQL

    1.mysql -u root -p   (root)用户名 2.mysql>GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'r ...

  2. Curator的监听

    如果要使用类似Wather的监听功能Curator必须依赖一个jar包,Maven依赖, <dependency> <groupId>org.apache.curator< ...

  3. 31. Next Permutation 返回下一个pumutation序列

    ［抄题］: Implement next permutation, which rearranges numbers into the lexicographically next greater p ...

  4. 51单片机学习笔记（郭天祥版）（1）——单片机基础和点亮LED灯

    关于单片机型号的介绍: STC89C52RC40C-PDIP 0721CV4336..... STC:STC公司 89:89系列 C:COMS 52(还有51,54,55,58,516,):2表示存储 ...

  5. java_21 Set接口、HashSet类、LinkedSet类

    1Set 包含不可重复元素的集合,是一个无序集合. 子类:hashSet .LinkedSet 2.含有父类Collection的方法 add(): 如果 set 中尚未存在指定的元素,则添加此元素( ...

  6. maven插件后报错：org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.maven.project

    在给eclipse换了高版本的maven插件后,引入jar包报如下的错误: org.apache.maven.archiver.MavenArchiver.getManifest(org.apache ...

  7. RFC

    一.简介   二.常用 1)TLSv1.2 Protocol https://tools.ietf.org/html/rfc5246

  8. CSP里的xss

    无CSP保护下的xss 1.直接嵌入型 <img src="192.168.81.137:80/xss.php?a=[cookie]"> 过滤较少时,优先考虑.触发方式 ...

  9. Sum of Even Numbers After Queries LT985

    We have an array A of integers, and an array queries of queries. For the i-th query val = queries[i] ...

  10. 别人的Linux私房菜（10）vim程序编辑器

    很多软件的编辑接口会主动调用vi vi分一般命令模式.编辑模式.命令行模式. 使用vi :/bin/vi welcome.txt 下下端显示文本有多少行,多少字符, 一般命令模式: 上下左右移动光标k ...