vue项目使用Iconfont（阿里图标库）

2019-11-12  19:07:02  by冲冲

1、操作步骤

① 登录阿里巴巴矢量图标库 https://www.iconfont.cn ，注册账号/关联账号。

② 前往“图标管理”--“我的项目”

③ 点击

④ 创建图标库

注意：

A. FontClass/Symbol前缀 很重要，如果项目中使用到ElementUI库就一定不要把前缀写成“el-icon”，会和ElementUI库的自带图标（icon）冲突，导致你图标显示不出来。

B. FontFamily必须写，但是内容没有严格限制（写啥都成）。

⑤ 选择需要的图标，添加入库

 

⑥ 下载至本地

⑦ 解压

红圈的文件是有用的，其他的没啥用。

⑧ 放置到vue项目

在src文件夹，新建asset文件夹，里面再新建icon文件夹，存放红圈文件。

⑨ 在项目main.js文件导入

iconfont.css

⑩ 使用

通过修改font-size，修改大小

2、参考

https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

【vue.js】vue项目使用Iconfont（阿里图标库）的更多相关文章

  1. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  2. Vue、Element-ui项目中如何使用Iconfont(阿里图标库)

    我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...

  3. VUE 引入阿里图标库

    本身项目是VUE, Element-UI项目, 所以内置Element-UI图标库 地址如下, https://element.eleme.cn/#/zh-CN/component/icon 使用时: ...

  4. 关于阿里图标库Iconfont生成图标的三种使用方式（fontclass/unicode/symbol）

    1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...

  5. 阿里图标库iconfont入门使用

    目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...

  6. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

  7. 开发辅助 | 阿里图标库iconfont入门使用

    目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...

  8. (vue.js)Vue element tab 每个tab用一个路由来管理？

    (vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理     时间:2017/5/13 0:24:01     关键词:   关于网友提出的“ (vue.js) ...

  9. flutter 引入第三方 Icon 图标（以阿里图标库为例)

    在fluttter中引入第三方图标库的具体方法: 1.在阿里图标库选好需要用的图标,添加进购物车将选好的图标打包下载到本地(下载代码),复制iconfont.ttf文件到项目中 2.存放途径:lib/ ...

随机推荐

  1. 寻找最佳路径（ArcPy实现）

    一.背景 随着社会经济发展需求,公路的重要性日益提高.在一些交通欠发达的地区,公路建设迫在眉睫.如何根据实际地形情况设计出比较合理的公路规划,是一个值得研究的问题. 二.实验目的: (1)通过练习,熟 ...

  2. 重修 Tarjan

    Tarjan是谁 Tarjan's SCCs(有向图强连通分量)algorithm 给定⼀个有向图 \(G\),若存在 \(rt\in V\),满⾜从 \(rt\) 出发能到达 \(V\) 中的所有的 ...

  3. bzoj2460元素（线性基，贪心）

    题目大意: 给定\(n\)个二元组\((a,b)\),求一个最大的\(\sum b\)的集合,满足这个集合的任意子集的\(a\)的\(xor\)值不为0 这道题需要一个线性基的性质: 线性基的任何非空 ...

  4. Bert文本分类实践（三）：处理样本不均衡和提升模型鲁棒性trick

    目录 写在前面 缓解样本不均衡 模型层面解决样本不均衡 Focal Loss pytorch代码实现 数据层面解决样本不均衡 提升模型鲁棒性 对抗训练 对抗训练pytorch代码实现 知识蒸馏 防止模 ...

  5. 轻量级 Java 基础开发框架，Solon & Solon Cloud 1.5.48 发布

    Solon 已有120个生态扩展插件,此次更新主要为细节打磨: 增加 solon.serialization,做为序列化的基础插件 优化 所有Json序列化插件,使之可方便定制类型序列化 public ...

  6. 详解python三大器——迭代器、生成器、装饰器

    迭代器 聊迭代器前我们要先清楚迭代的概念:通常来讲从一个对象中依次取出数据,这个过程叫做遍历,这个手段称为迭代(重复执行某一段代码块,并将每一次迭代得到的结果作为下一次迭代的初始值). 可迭代对象(i ...

  7. 编程题：X星人的金币

    X星人的金币 时问限制:3000MS 内存限制:589824KB 题目描述: X是人在一艘海底沉船上发现了很多很多很多金币.可爱的X星人决定用这些金币来玩一个填格子的游戏.其规则如下:第1个格子放2枚 ...

  8. SharkCTF2021 Classic_Crypto_king2

    crypto类题. 题面如下: 前面的代码给出了原理:后面的字符串第一行是print出的key,第二行是密文. 加密原理是,首先对table进行乱序处理,然后将明文flag按照(顺序table--&g ...

  9. CentOS 文件管理

    目录 目录管理 目录结构 切换目录 查看目录 创建目录 复制目录 剪切目录 删除目录 文件管理 查看文件 创建文件 复制文件 剪切文件 删除文件 创建链接 目录管理 目录也是一种文件. 蓝色目录,绿色 ...

  10. spring security中ajax超时处理

    spring security为我们的系统提供了方便的认证和授权操作.在系统中完成认证和授权后,一般页面页面上大多数是ajax和后台进行操作,那么这个时候可能就会面临session超时,ajax去访问 ...