在vue项目中引入阿里图标库小记
使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少。为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例,如何在vue中使用。
1、首先找到合适图标,然后点击添加入库,接着点击右上角的购物车图标。

2、你刚才选择的图标就能在侧边栏看到了,选择要加入的项目(提前建好的项目),点击确定。

3、进入我的项目页面,就能看到所有选择好的图标,点击下载至本地按钮。

4、文件解压后,将所有文件复制到如下目录。

5、在main.js文件里引入iconfont.css。

6、现在就可以在项目中引入图标了。必须添加iconfont类,然后再添加图标名字作为类名。
<i class="iconfont icontuding"></i>

在vue项目中引入阿里图标库小记的更多相关文章
- 前端学习笔记系列一:5 在项目中引入阿里图标icon
进入到阿里的图标库网站,里面有上百万种icon,https://www.iconfont.cn,需要注册一个帐号,然后进入到这个页面,在这里点击右下角的带加号的图标,创建一个新的项目,名称与你要使用图 ...
- 小程序中使用阿里图标库iconfont
小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...
- MintUI引入vue项目以及引入iconfont图标
官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://eleme ...
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
- 在vue项目中引入jquery
在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...
- vue项目中引入Sass
Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...
- VUE 引入阿里图标库
本身项目是VUE, Element-UI项目, 所以内置Element-UI图标库 地址如下, https://element.eleme.cn/#/zh-CN/component/icon 使用时: ...
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- vue项目中使用iconMoon图标
前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...
随机推荐
- HDU 5113:Black And White(DFS)
题目链接 题意 给出一个n*m的图,现在有k种颜色让你对这个图每个格子染色,每种颜色最多可以使用col[i]次,问是否存在一种染色方案使得相邻格子的颜色不同. 思路 以为是构造题,结果是爆搜.对于每一 ...
- 玲珑OJ 1082:XJT Loves Boggle(爆搜)
http://www.ifrog.cc/acm/problem/1082 题意:给出的单词要在3*3矩阵里面相邻连续(相邻包括对角),如果不行就输出0,如果可行就输出对应长度的分数. 思路:爆搜,但是 ...
- printf打印参数的顺序问题
C语言的printf函数处理的参数顺序是从右向左的,例如如下程序: #include <stdio.h> int main() { int a = 1, b = 2, c ...
- GPS常识-A版(详)
第一章 绪论 1.简述GPS系统的特点有哪些? GPS在测绘工程中应用的优点 P13 ●定位精度高 应用实践证明,相对静态定位1小时以上观测解,其平面位置:在300-1500m范围内,绝对误差小于1m ...
- 【并查集】连接格点-C++
连接格点 描述 有一个M行N列的点阵,相邻两点可以相连.一条纵向的连线花费一个单位,一条横向的连线花费两个单位.某些点之间已经有连线了,试问至少还需要花费多少个单位才能使所有的点全部连通. 输入 第一 ...
- 洛谷 P1311 【选择客栈】
枚举在那个咖啡店喝咖啡 想要计算咖啡店两侧同色的客栈的对数 枚举i求和(左边第i种颜色的个数*右边第i种颜色的个数) 前缀和+后缀和 f[i][j]f[i][j]f[i][j]表示到第i家客栈及之前颜 ...
- Method has too many Body parameters openfeign
feign 调用问题,最新版本的feign和旧版本的稍微有一些不一样,具体如下(eureka 作为服务发现与注册 ) 依赖: compile('io.github.openfeign:feign-ja ...
- C# MATLAB混编(一)
参照这篇博客进行的C# MATLAB混编学习,学习过程中文章中的一些问题我并没有遇到,但是我遇到了一些新问题,这些问题的解决办法将在下一篇博客给出. 配置环境:vs2010(64位)+Matlab20 ...
- Java EE产生的背景
为了满足开发多层体系结构的企业级应用的需求,Java公司的创始人Sun公司在早期的J2SE(Java 2 Platform Standard Edition)基础上,针对企业级应用的各种需求,提出了J ...
- Java用户程序
Java的用户程序分为两类:Java Application和Java Applet. 这两类程序在程序结构和执行机制上有一定的差异. Java Application是完整的程序,需要独立的Java ...