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. 初学c# -- 学习笔记（9） 关于SQL2008

    在做一个局域网的类似网盘的学习练习,服务端差不多了,在改bug.用vlc的dll做的全格式视频.音频预览在线播放下载等等. 在做服务端也遇到了一些问题,走了好多弯路. 开始把上传的视频.音频.图像.文 ...

  2. java各历史版本官网下载

    java各历史版本官网下载: http://www.oracle.com/technetwork/java/javase/archive-139210.html

  3. java_18 Collection接口

    1.Collection接口 Collection 层次结构 中的根接口.Collection 表示一组对象,这些对象也称为 collection 的元素.一些 collection 允许有重复的元素 ...

  4. 微软Office Online服务安装部署（二）

    现在准备配置Client 1.进入到桌面后,打开powershell 输入: Add-WindowsFeature Web-Server,Web-Mgmt-Tools,Web-Mgmt-Console ...

  5. java ssh执行shell脚本

    1.添加依赖 com.jcraft:jsch ch.ethz.ganymed:ganymed-ssh2:262 2.获取连接 conn = new Connection(ip, port); conn ...

  6. 基于springboot的restful接口的单元测试示例

    一.知识点 代码中对应的知识点 1.jsonPath github网址 1)操作符见文档 2)方法见文档 3)例子见文档 2.MockMvc(org.springframework.test.web. ...

  7. GUI设计和UI设计有什么区别？

    首先从技术的角度分析两者处于包含与被包含的关系. GUI=Graphical User Interface,是指在计算机出现后,在屏幕上使用图形界面来帮助(User)与机器打交道用的界面接口,泛指在计 ...

  8. 深入理解JVM(三)垃圾收集器和内存分配策略

    3.1 关于垃圾收集和内存分配 垃圾收集和内存分配主要针对的区域是Java虚拟机中的堆和方法区: 3.2 如何判断对象是否“存活”(存活判定算法) 垃圾收集器在回收对象前判断其是否“存活”的两个算法: ...

  9. java多线程系列17 ThreadLocal

    ThreadLocal 叫做 线程局部变量 在详细解释之前 先看一段代码 public class ThreadLocalTest { private static ThreadLocal<In ...

  10. AX_InventCounting

    static void Job649(Args _args)  {      ItemId                  ItemId          = "000XA00612R1& ...