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. 对cpu与load的理解及线上问题处理思路

    cpu如何计算 当我们执行top命令的时候,看到里面的值(主要是cpu和load)值是一直在变的,因此有必要简单了解一下Linux系统中cpu的计算方式. cpu分为系统cpu和进程.线程cpu,系统 ...

  2. Tekton+Argocd实现自动化流水线

    目录 什么是tekton 安装tekton 安装Dashboard Tekton提供的CRD 安装argocd 创建argocd 安装客户端 连接argocd server 创建App 集群中查看效果 ...

  3. 测试小姐姐问我 gRPC 怎么用，我直接把这篇文章甩给了她

    原文链接: 测试小姐姐问我 gRPC 怎么用,我直接把这篇文章甩给了她 上篇文章 gRPC,爆赞 直接爆了,内容主要包括:简单的 gRPC 服务,流处理模式,验证器,Token 认证和证书认证. 在多 ...

  4. Java：并发笔记-07

    Java:并发笔记-07 说明:这是看了 bilibili 上 黑马程序员 的课程 java并发编程 后做的笔记 6. 共享模型之不可变 本章内容 不可变类的使用 不可变类设计 无状态类设计 6.1 ...

  5. 【二食堂】Beta - 测试报告

    Beta - 测试报告 测试过程中发现的bug Beta阶段的新bug 我们在Beta阶段的开发过程中就进行了测试,发现了许多bug.这其中后端的bug比较多,在这里我列举一些比较重要的功能性bug. ...

  6. oo第四次博客-UML暨学期总结

    一. 本单元两次作业架构设计 这两次作业实际上难度不大,不存在算法上的难题,大部分时间都是用在处理UML图中各个元素的关系上. 第一次UML主要处理UML类图.有UMLclass,UMLinterfa ...

  7. VS2019、Qt5.12及QGis3.16开发常见问题汇总

    在C++.Qt软件开发过程中,常常遇到一些编译错误或警告:本文将VS2019.Qt5.12.10和QGis3.16.10的二次开发过程常见的问题做了整理,供大家参考,也便于日后查阅.该内容分为四部分: ...

  8. VirtualBox问题解决合集 - [drm:vmw_host_log [vmwgfx]] *ERROR* Failed to send host log message

    转载:https://blog.csdn.net/mychangee/article/details/104954262 问题描述:[drm:vmw_host_log [vmwgfx]] ERROR  ...

  9. accept error: Too many open files

    今天测试socket服务器同一时间处理多个客户端连接问题,第一次测试1000个的时候没问题,第二次测试1000个服务器accept的时候就报错了 accept error: Too many open ...

  10. mdev 响应热插拔事件

    热插拔事件是从内核空间发送到用户空间的通知,一般这时候系统配置出现了变化,比如插入/移除耳机,插入/移除SD卡或者USB存储设备等. 热插拔事件默认会调用/sbin/hotplug来加载驱动程序,创建 ...