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. ...
随机推荐
- 设置同一个域名同一个源通过cdn用不同的端口访问网站设置
下图例子是设置80和88访问,因为80是默认的访问,所以只要设置88就行 进入站点管理-->应用防火墙-->高级设置 这个设置用到了url和host模块 在站点设置里设置要用到的端口:
- Java学习笔记（二十二）：打包程序
加入一个程序测试完毕,我们就可以将它打包,就可以放到服务器上运行了 找到左下角的终端 点击 输入命令: mvnw clean package -DskipTests=true clean:清除以前生成 ...
- java学习笔记（八）：继承、extends、super、this、final关键字
继承解决代码重用的问题,方便管理和维护代码. 继承 子类拥有父类非private的属性,方法. 子类可以拥有自己的属性和方法,即子类可以对父类进行扩展. 子类可以用自己的方式实现父类的方法. Java ...
- NLTK 统计词频
import nltk Freq_dist_nltk = nltk.FreqDist(list) for k,y in Freq_dist_nltk: print str(k),str(y)
- yii2 basic版本的一些配置
1.nginx配置 重写规则 修改访问模式为 http://wh.store/admin/index 文件位置: /home/wwwroot/default/yii2-app-basic/config ...
- C++中的inline用法
- 【python深入】获取对象类型及属性
在python中,查看当前的对象所能够调用的所有方法? 查看类型可以通过type,也可以通过isinstance方法,查看属性可以通过dir() 下面是对type的介绍: ————>基本类型的判 ...
- jmeter 如何发送上传文件接口请求
1.上传图片接口,通过抓包工具获取接口相关信息,然后在信息头里添加Content-Disposition:form-data; name="imgType" 2.在请求中MIME类 ...
- 网络编程初识和socket套接字
网络的产生 不同机器上的程序要通信,才产生了网络:凡是涉及到倆个程序之间通讯的都需要用到网络 软件开发架构 软件开发架构的类型:应用类.web类 应用类:qq.微信.网盘.优酷这一类是属于需要安装的桌 ...
- 【Git】 GitLab简单使用
本例介绍简单实用GitLab,安装请参照[Git] GitLab服务器社区版安装与配置 1.用户和组的管理 a.创建组,在首页点击Create a group b.创建用户,在首页点击Add peop ...