1、注册登录账号

网站地址:https://www.iconfont.cn/

该网站可通过GitHub或新浪账号进行登录

下面是网站的首页

2、查找图标

在中间输入框输入想要查找的图标,。以‘home’为例,点击搜索,即可得到以下页面。

3,将图表添加至项目。

选中自己需要的图标,将其添加入库,这时再点击页面右上角的购物车图标

弹出以下页面,点击添加至项目,如果是新建项目,点击右边的加号图标,然后点击确定

4,在项目中使用图标

添加至项目后会跳转至以下页面,左边显示项目的名称,右上角可以添加项目成员,共享这些图标。要使用这些图标的话就需要下载至本地了。

点击下载至本地,会得到一个压缩文件,解压文件,得到以下内容

将上图5个文件放入项目的目录下,并在main.js文件中引入css文件。

用浏览器打开fontclass.html文件,将图标的类名添加至 i 标签即可,如下所示。

<class="iconfont icon-home"></i>

转载于:https://www.cnblogs.com/thinkguo/p/10250271.html

阿里矢量图标库的使用相关推荐

  1. uniapp 引入阿里矢量图标库的详细步骤及踩坑经历

    uniapp 引入阿里矢量图标库的详细步骤及踩坑经历 首先在阿里矢量图标库选择自己喜欢的图标 加购物车如下图 点击右上角的购物车 添加到项目 这里有坑 首先你不选中在线链接 你是看不到 @font-f ...

  2. vue框架项目中使用阿里矢量图标库

    vue框架项目中使用阿里矢量图标库 一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码 二.解压缩包,将解压缩后的 文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...

  3. 【sciter】:sciter 使用阿里矢量图标库

    sciter 使用阿里矢量图标库 步骤一:选择要使用的图标,并添加到项目中(阿里矢量官网中的项目) 步骤二(关键):选中项目设置,在字体格式中选择TTF,其他不选,保存 步骤三:点击 Font cla ...

  4. 在uni-app里面怎么引入阿里矢量图标库?

    最近在学习uni-app,每次在需要用到icon的时候都得下载下来,感觉好麻烦,所以就找到了直接引入阿里矢量图标库的方法,妈妈再也不用担心我为下载icon的样式不规范而发愁了,以下方法供大家参考 在图 ...

  5. Vue项目中,引入阿里矢量图标库

    Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...

  6. vue项目中使用阿里矢量图标库

    1.下载图标代码在本地 2.将一下文件放在一个文件夹比如icon文件夹下,将icon放在assets文件夹下,如图 3.在main.js中导入 import './assets/icon/iconfo ...

  7. 微信小程序自定义组件使用阿里矢量图标库图标

    有时候我们有这一种需求:在使用组件的时候,希望能传入自己写的class样式. 测试了一番,直接传递class参数是无效的,那我们怎么做呢? 开始实践 仔细查阅了官方文档,发现是可以的. 我们首先在组件 ...

  8. uniapp添加阿里字体图标库图标

    字体图标添加 1.需要到阿里矢量图标库添加 2.添加后Unicode下载并替换@/styles/font下文件 3.在线图标方式 复制阿里矢量图标库->我的项目->Unicode-> ...

  9. 新版Iconfont-阿里巴巴矢量图标库支持三种引用方式

    官网地址:iconfont-阿里巴巴矢量图标库 然后将压缩包解压,代码包括demo的html和css文件.iconfont的css.js以及各种字体文件,demo是使用说明,iconfont文件是使用 ...

  10. 如何使用阿里巴巴矢量图标库,创建自己的svg图标库(iview ts)

    一.在阿里矢量图标库创建自己的项目 点击上传图标至项目 点击下载至本地 就会获得对应的iconfont文件夹 二.将文件夹放在 三.在项目的main.ts中加入 import '@/assets/ic ...

最新文章

  1. SQL Server 2000安装时不出现安装界面,进程中存在解决
  2. Spring Aop 常见注解和执行顺序
  3. python和c++哪个好找工作-升学为主的编程学python和C++哪个好?
  4. shiro学习(24):Spring的transaction-manager的用法
  5. Batch Normalization批量归一化
  6. 计算机准考证打印是什么时候,2019年9月计算机等级什么时候打印准考证?
  7. 【转】Hbase之shell命令的使用
  8. php form 上传_php+html5使用FormData对象提交表单及上传图片的方法
  9. springMVC从发送hello请求到响应的执行流程分析
  10. STM32从设置IO输入上下拉到寄存器GPIOx_BSRR、GPIOx_BRR
  11. cs架构嵌入bs_如何设计CS和BS混合结构
  12. Servlet 身份验证体系结构
  13. 计算机网络中使用的最多的交换技术是,计算机网络中主要使用的交换技术
  14. 云平台与操作系统两种架构的分析
  15. 高盛发布VR/AR研究报告
  16. 详解 Flink Metrics 原理与监控实战
  17. Windows上搭建安卓的JAVA开发环境(Ecli...
  18. 美国把互联网服务器都关了,到底对我们有什么影响?
  19. 盒模型——快递比喻法
  20. 计算机为什么不读500g硬盘,为什么我的500g硬盘的实际容量只有46 5. 1G

热门文章

  1. 一个接口文档模板的API设计流程
  2. 整数规划---指派问题
  3. MySQL数据类型有哪些?
  4. matlab灰度分段线性变换优缺点,matlab分段线性变换
  5. 基于java的高校科研管理系统
  6. python下载完了之后怎么用_python下载后怎么用
  7. FPGA实现任意角度旋转图片
  8. 攻防世界-music-高手进阶区-miscmisc
  9. 麦咭萌app送智伴机器人_国内儿童陪伴机器人品牌盘点
  10. Java权限管理系统完整案例