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. 2021年1月-第02阶段-前端基础-HTML+CSS进阶-VS Code 软件

    软件安装 VSCode软件 能够安装 VS Code 能够熟练使用 VS Code 软件 能够安装 VS Code 最常用的插件 1. VS Code简介 1.1 VS Code 简介 Visual ...

  2. 分库分表利器之Sharding Sphere（深度好文，看过的人都说好）

    Sharding-Sphere Sharding-JDBC 最早是当当网内部使用的一款分库分表框架,到2017年的时候才开始对外开源,这几年在大量社区贡献者的不断迭代下,功能也逐渐完善,现已更名为 S ...

  3. django通过管理页上传图片

    1.配置目录 新建上传录.static/medis 2.设置上传文件保存路径 # setting.py中设置上传文件路径static/media MEDIA_ROOT = os.path.join(B ...

  4. 如何接入 K8s 持久化存储？K8s CSI 实现机制浅析

    作者 王成,腾讯云研发工程师,Kubernetes contributor,从事数据库产品容器化.资源管控等工作,关注 Kubernetes.Go.云原生领域. 概述 进入 K8s 的世界,会发现有很 ...

  5. [技术博客] Django中文件的保存与访问

    [技术博客] Django中文件的保存与访问 在TextMarking项目开发中,数据库需要保存用户上传的文本文档. 原型设计:用户点击上传文本->保存文本->文本发送到后端保存为文件. ...

  6. Noip模拟43 2021.8.18

    T1 地一体 可以树形$dp$,但考场没写出来,只打了没正确性的贪心水了$30$ 然后讲题的时候B哥讲了如何正确的贪心,喜出望外的学习了一下 不难发现 每次士兵都会直接冲到叶子节点 从深的点再返回到另 ...

  7. jzoj6094

    题目描述 给定一个循环流(每个点均满足流量平衡条件),这个循环流有$n$个点,且每条边的流量只有 $1$ 或$ 2$,其中$a$条边流量为$1$,$b$条边流量为$2$,判断是否存在一个流满足上述条件 ...

  8. 单片机STM32在开发中常用库函数详解

    1.GPIO初始化函数 用法: voidGPIO_Configuration(void) { GPIO_InitTypeDefGPIO_InitStructure;//GPIO状态恢复默认参数 GPI ...

  9. Nginx（一）：初识Nginx

    一.什么是Nginx? Nginx 是异步框架的Web服务器,也可以用作反向代理.负载平衡器和HTTP缓存.选择Nginx的一些优点:可以高并发连接.内存消耗少.成本低廉.配置文件简单.节省带宽.稳定 ...

  10. 嵌入式开发板nfs挂载

    板子要开始调试了,第一个头大的问题就是调试过程中更新的文件怎么更新到板子上,以前用sd卡拷贝来来回回太浪费时间了,adb也需要接线各种连接操作. 现在板子有wifi可用,是时候把nfs共享搭起来了. ...