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. Java基础之（四）：使用IDEA实现HelloWorld

    使用IDEA实现HelloWorld 在使用IDEA这个集成开发环境写Java程序之前,我们要先对IDEA进行一些基本的配置,以便我们能够更好地使用它. 新建一个空项目,用来学习基础语法 设置项目名称 ...

  2. Min_25筛 学习小记

    前言 为什么叫学习小记呢?因为暂时除了模板题就没有做其他的东西了.(雾 这个东西折磨了我一整天,看得我身不如死,只好结合代码理解题解,差点死在机房.(话说半天综合半天竞赛真是害人不浅) 为了以后忘了再 ...

  3. noip2017D1T3逛公园（拓扑图上dp，记忆化搜索）

    QWQ前几天才刚刚把这个D1T3写完 看着题解理解了很久,果然我还是太菜了QAQ 题目大意就是 给你一个n个点,m条边的图,保证1能到达n,求从1到n的 (设1到n的最短路长度是d)路径长度在[d,d ...

  4. WinForm RichTextBox 常用操作

    1.设置不自动选择字词 RichTextBox在选择文字的时候,如果没有关闭自动选择字词功能,我们有时候选择的时候会自动将光标前后的字或者词连接在一起进行选择. RichTextBox有属性AutoW ...

  5. UnboundLocalError: local variable 'range' referenced before assignment

    1. 报错信息 UnboundLocalError: local variable 'range' referenced before assignment 2. 代码 class Car(): &q ...

  6. vue3.x移动端适配px2rem

    1.什么是px2rem px2rem是一个插件能将px自动转换为rem,以适配各种不同的屏幕尺寸.前端开发可以直接使用设计稿量出的尺寸或者蓝湖给出的px进行布局,这样极大的提高了开发效率. 2.前提条 ...

  7. linux与windows下文件编码问题

    注:转换操作均在Linux终端进行操作 DOS与Unix格式转换 安装工具:dos2unix.unix2dos # ubuntu apt-get install dos2unix apt-get in ...

  8. WiFi天线对PCB布局布线和结构的要求详解 - 全文

    随着市场竞争的加剧,硬件设备正以集成化的方向发展.天线也由外置进化内置再进化到嵌入式,我们先来介绍这类应用的天线种类: ⑴ On Board板载式:采用PCB蚀刻一体成型,性能受限,极低成本,应用于蓝 ...

  9. 【做题记录】[NOIP2016 普及组] 魔法阵

    P2119 魔法阵 2016年普及组T4 题意: 给定一系列元素 \(\{X_i\}\) ,求满足以下不等式的每一个元素作为 \(a,b,c,d\) 的出现次数 . \[\begin{cases}X_ ...

  10. Ubuntu用apt安装MySQL

    这里以MySQL5.7为例. # 如果之前有安装旧版,先移除sudo apt-get --purge remove mysql-server mysql-client mysql-common # 安 ...