vue elementui 引入第三方icon iconfront
elementui框架自带icon在开发大型前端应用时显得捉襟见肘。淘宝开源的iconfront的图标库上有很多优秀的icon图标。elementui支持整合iconfront到应用中，步骤如下：
- 首先需要在iconfront注册登陆，新建项目，然后把心仪的icon添加到项目中。
) - 接下来有两种做法，一种是在线链接，一种是下载解压后拷贝到本地的项目。
- 在线链接方式如下
新建一个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的更多相关文章
- Vue Element-UI使用第三方icon图标（转）
转载自:https://www.jianshu.com/p/59dd28f0b9c9 1.打开阿里icon,注册 >登录>图标管理>我的项目 2.新建项目 3. 添加icon到项 ...
- vue element-ui中引入第三方icon
vue element-ui中引入第三方icon 把图标加入项目 设置项目名称,下载项目(项目名称自定义) 解压项目到开发目录 在main.js中全局引入css文件 修改下载下来的项目中的css文件, ...
- flutter 引入第三方 Icon 图标（以阿里图标库为例)
在fluttter中引入第三方图标库的具体方法: 1.在阿里图标库选好需要用的图标,添加进购物车将选好的图标打包下载到本地(下载代码),复制iconfont.ttf文件到项目中 2.存放途径:lib/ ...
- vue项目引入第三方js插件，单个js文件引入成功，使用该插件方法时报错（问题已解决）
1.引入第三方js文件,npm安装不了 2.控制台显示引入成功 3.在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=>{ var cd ...
- Vue中如何引入第三方icon库（阿里巴巴矢量图标库）
1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车 ...
- vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
- vue 中引入第三方js库
以 jQuery 为例 一.绝对路径直接引入,全局可用 主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1. ...
- Vue如何引入icon图标
1.下载icon图标,推荐icomoon网站,里面有大量的矢量图标,也可以自定义,当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标.点击进入icomoon网站点击右上角“IcoM ...
- Vue+ElementUI的后台管理框架
新开发的一个后台管理系统.在框架上,领导要用AdminLTE这套模板.这个其实很简单,把该引入的样式和js文件引入就可以了.这里就不多赘述了.有兴趣的可以参考:https://www.jianshu. ...
随机推荐
- mysql5.5升级到5.7
一.首先把mysql服务停止,复制mysql5.5中的data文件夹中的内容(你需要的数据库),放在mysql5.7的data文件夹中; 二.启动切换mysql5.7版本,(我这用的是phpwamp, ...
- ES6的let和const的不同点
详细的异同点请点击:https://blog.csdn.net/zhouziyu2011/article/details/71366078
- eclipse中tomcat可以start启动，无法debug启动的解决
设置断点,进行程序调试,但是debug启动tomcat,却无法启动,并且会报超时异常. 原因可能是eclipse和tomcat启动时读取文件发生冲突 去掉所有的断点,然后重新debug启动,再设置断点 ...
- ubuntu6.4系统安装JIRA-7.8
一.系统环境: system version:ubuntu6.4 openjdk version (java版本) :1.8.0_191 mysql version:14.14 jira vers ...
- Sass入门及知识点整理
Sass 快速入门 | SASS 中文网 文档链接:https://www.sasscss.com/getting-started/ 前言 之前整理了一篇关于Less的,现在就来整理一下关于Sass的 ...
- ramfs的两种制作方法
制作方法1 1 准备一个已经可以使用的文件系统,假设目录为/rootfsLinux内核需要支持ext2文件系统及ramdisk支持(fs相应的选项要勾上)2 在pc上制作ramdisk镜像(1)dd ...
- 深入理解JVM(三)垃圾收集器和内存分配策略
3.1 关于垃圾收集和内存分配 垃圾收集和内存分配主要针对的区域是Java虚拟机中的堆和方法区: 3.2 如何判断对象是否“存活”(存活判定算法) 垃圾收集器在回收对象前判断其是否“存活”的两个算法: ...
- wince 6.0 汉字乱码
CStdioFile file; file.Open(…); file.WriteString(_T("abc你好"));//只能写入abc 解决办法: 使用setlocale语句 ...
- thymeleaf学习笔记：总结
Thymeleaf定义:Thymeleaf is a modern server-side Java template engine for both web and standalone envir ...
- poj2240
一个关于套利的题,就是判断是否有正环,我这里是用的SPFA,只要判断出来一种货币初始为1,最后变得大于1就代表是正环,要注意一下最后对vector的清空,当时从1开始清空,导致wa了两次,找了半天,尽 ...