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. SpringJDBC中jdbcTemplate 的使用

    一:定义 SpringJDBC是spring官方提供的一个持久层框架,对JDBC进行了封装,提供了一个JDBCTemplated对象简化JDBC的开发.但Spring本身不是一个orm框架,与hibe ...

  2. python3 urllib.parse 常用函数

    1.获取url参数 urlparse from urllib import parse url = "https://docs.python.org/3.5/library/urllib.p ...

  3. Mac 安装、卸载JDK 1.6

    卸载 输入 sudo rm -fr /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin sudo rm -fr /Library/Preferenc ...

  4. Scrapy反爬

    1,随机更换 user-agent: 将足够多的user-agent放在settings中,在parse方法中调用 缺点:每一个request中都要调用这个方法 这个是scrapy的流程图. 既然每一 ...

  5. linux之重定向命令

    1.shell重定向概念:shell重定向包含输出重定向和输入重定向 何为输入输出方向?何为标准输入输出方向? 标准输入方向:从键盘读取用户输入的数据,然后再把数据拿到程序(C语言程序.Shell 脚 ...

  6. python的基本用法（四）文件操作使用

    #读文件,文件必须存在才能读f=open('操作文件',encoding='utf-8')res =f.read()print(res)f.close()#写文件fw=open('操作文件',mode ...

  7. node.js中process进程的概念和child_process子进程模块的使用

    进程,你可以把它理解成一个正在运行的程序.node.js中每个应用程序都是进程类的实例对象. node.js中有一个 process 全局对象,通过它我们可以获取,运行该程序的用户,环境变量等信息. ...

  8. 游戏脚本编程 文本token解析

    一个数字的组成由以下几个字符 正负号 + -   小数点 .   数字 0-9 比如 3 -3 3.13 -34.2234 但是符号和小数点不会出现多次 那么识别流程用图来表示 则是 整数 浮点数 一 ...

  9. nodeJS实现一个在线填表应用

    1.构建一个web服务器 以前玩php和jsp时用过Apache.汤姆猫服务器,nodejs则有不同,他是需要自己createServer. //server.jsvar http = require ...

  10. 用Rider写一个有IOC容器Autofac的.net core的程序

    一:Autofac是一个和Java里的Spring IOC容器一样的东西,不过它确实没有Spring里的那么方便,主要是在于它没有提供足够的Api和扫描方式等等,不过优点是它比Spring要快很多,而 ...