Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。
2018-11-9更新
VX号: LJT-917
这是我的微信公众号全是技术文章：
1.傻瓜式引用：由于这种方法及其简单 省去了很多繁琐的步骤，
a.引入项目生成的，图标地址。
b.使用推荐使用这种，详情请看文档！！文档够详细的了。http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
2.笨拙式引用：
准备工作
1.
先注册，再登录、找到图标管理、我的项目
2.
点紫色的这个创建自己的项目
3.
图中画红线的地方很重要
1）、FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式。
如果你写成这样的前缀，会和element-ui框架所带的图标（icon）冲突，导致你图标显示不出来
2）、FontFamily随便起一个名字，你能记住就行
4.项目创建完了，你可以往项目里面添加自己想要的图标了
1）、比如我想要一个设置的图标
搜索之后能找出来好多不一样的设置图标，找到你想要的图标，点击添加入库，当你点击完之后，购物车会出现你刚才添加入库的数量
点这个购物车
点添加至项目，这时候回弹出来你刚才创建好的项目，选中你刚创建好的项目，在点击下面的确定
5、OK!!! 图标添加完毕！！
找到我的项目->你刚才创建的那个项目->点击下载到本地
6、你会得到一个压缩包，打开这个压缩包，里面有一些文件是没用的。
画红线的留着，其他没画的可以删除
搭建项目
1.在vue-cli、element-ui项目中，src文件夹->assets->文件夹下面创建名字为icon的文件夹
2.将上面第六步中画红线的文件拷贝到icon文件夹中。
3.找到项目中的main.js文件，导入iconfont.css样式
4.打开iconfont.css文件你会看到，
上面的是，你创建项目时候定义的字体，下面的是你一会要引入的样式类名（就是你想要的图标）
5.ok我们这回终于可以引用图标了
<span class="fontFamily hhtx-shezhi"></span>//记住别写错！！在这里可以根据这个类名改变这个图标的字体大小、颜色、、、、
我习惯用引入类名方式，当然还有icon="fontFamily hhtx-shezhi" 这种方式
6.效果展示
7.假如你还想要其他图标，那就继续往里面添加入库，然后下载文件，找到有用的文件复制粘贴到icon文件夹里面来，一定要把之前的替换掉
总结
引入的图标是不是比你平时引入的img高大尚很多，它还可以支持css的语法，文件体积还小，还可以让其不和element-ui图标冲突，赶快入手吧！
这是我的微信公众号全是技术文章：
不定期更新前端知识
这个是我本人的，前端技术QQ交流群，有不会的问题，可以在在群里面问：
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)相关推荐
- 在Vue+Element ui 项目中如何使用iconfont（阿里图标库）中的图标
在项目过程中,element ui 中自带的图标往往满足不了自己的需求,那么如何在项目中使用iconfont的图标呢? 在iconfont中新建一个项目 找到自己想要的图标,加入购物车,加入完成后点击 ...
- 在vue项目中使用第三方的字体图标库
如何在vue项目中使用第三方的字体图标库 以在vue项目中导入阿里字体图标库为例 1.打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069 ...
- vue+element 使用iconfont (阿里图标库)
步骤一(找到自己要引入的图标,如果已经找到只是不会引入,请直接查看步骤二): 准备:首先进入阿里图标库,登录自己的账号,在下图位置输入想搜索的图标,例如:'退出' 随便选一个自己想要的如图 把鼠标移动 ...
- 实验管理系统springboot+vue+element ui项目开发
实验管理系统 某学院实验老师长期采用人工的形式完成药品试剂的入库.查询.出库的流程.但这种方式存在诸多问题和不便: 1. 在仓库运行流程中效率不高,容易出错. 2. 管理人员不能方便的了解每种物品的状 ...
- vue中通过在线链接使用iconfont阿里图标库FontClass
看项目原来的都是将图标下载到本地,然后引入css文件.查了些文章也都是介绍的,先将图标下载到本地再导入. 那么在项目开发中,时不时就会需要加入新的图标.这时候每次都要重新将图标下载到本地再导入.觉得十 ...
- iconfont图标_在React-Native项目中轻松使用iconfont自定义图标
在开发React-Native项目的时候,为了解决图标等一系列问题,往往需要从iconfont中引入图标.为了达到这个目的,网上教程大多都需要额外安装react-native-vector-icons ...
- iconfont在ionic中的使用（阿里图标库）
iconfont在ionic中的使用: 1.进入iconfont官方网址后 2.搜索你想要的图标,添加到购物车(前提:是已经登录,这里可以使用github注册登录) 3.点击购物车创建项目并下载到本地 ...
- vue+element ui 项目 后台管理系统
前端界面 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
- vue+element（项目中的使用）
Table 1,带选择的table,选择时选择对应的id进行操作 let arr = []; //选择id存放的数组for (let i = 0; i < val.length; i++) {a ...
最新文章
- 软件测试工程师的角度看论证学问
- C/C++开发中防止头文件被重复引入的3种方法
- 应用负载均衡之LVS(三)：ipvsadm命令
- servlet与tomcat的关系
- 【STM32】 keil软件工具--菜单详解
- 《软件需求十步走》读书笔记02
- 阿里云联合信通院发布《基于云计算的数字化业务安全工程要求》
- 计量经济学（十）---模型选择：标准与检验
- 小布老师_Oracle11g SQL基础入门
- 区块链Baas应用服务平台开发搭建
- linux服务器被植入挖矿病毒后初步解决方案
- 成语填空微信小程序，登录接口修复版
- 基于 Python 使用 CNN 实现身份证汉字和数字识别
- 米家扫地机器人是石头代工_科沃斯投资研究报告 - 大湾区小家电分享
- UDP编程——TFPT（小文件传输）
- OBS 进阶 之 高分屏下 屏幕采集不全问题解决
- 抽象类和接口的相同点与不同点
- git 和 phabricator arc 常用 命令解析
- MVC发布出现：未能将文件bin\xxx.xml 复制到 obj\Release\PackageTmp\bin\xxx.xml,未能找到文件
- 关于华为DevEco studio2.0的安装和运行第一个hello world的文章