官网：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

第一种方法

1、打开官网：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

2、注册账号并登陆（已有账号直接登录）

3、点击网页中间的搜索框，搜索你需要的矢量图标的名称。这里我需要的是首页图标，所以搜索“首页”。选取某一个或多个点击你需要的图标 -> 添加入库。添加入库后点击购物车，添加至项目即可，名称自定。

注意每次新增图标都要刷新在线生成

4、点击生成代码，复制代码。在html文档（如标签中，和引用外部CSS文件一致）添加以下代码

<link rel="stylesheet" href="http://需要引用的CSS代码">

5、完成后，在你需要添加矢量图标的位置插入标签，如图所示:

<i class="iconfont 你的矢量图标名称"></i>

6、至此完成，亦可通过style样式设置矢量图标的大小和颜色，使用font-size属性控制图标大小，color控制其颜色

第二种方法

第一步：登陆后。喜欢哪个放到购物车

记得点击在线生成，复制此模块到css文件中

第二步：下载代码。会下载到一个压缩包

在html文件中引入iconfont.css就行。只引入这一个css文件就好！！！！

阿里云矢量图标使用方法相关推荐

uni-app（一）----引入阿里云矢量图标库
这段时间因为老师要求,要做一个小程序,所以开始学一下uni-app开发,以后我会把我学的东西都发出来.现在写一下关于引入阿里云矢量图标库的方法添加图标首先去官网选择你喜欢的图标你可以在这搜索你想 ...
uniapp如何引入阿里云矢量图标库
最近搞了下uniapp的开发,写一下关于引入阿里云矢量图标库的方法: 首先说下我走过的坑吧,我直接把图标zip包下下来放在static里面,在App.vue的style中引入,保存,后面查了下,微信小 ...
阿里云矢量图标的使用
阿里图标官网:https://www.iconfont.cn/ 创建"我的项目",获取css链接: 两种使用方法: 一.本地引用 1.引入iconfont 的css <lin ...
html引用阿里云矢量图标（不照搬官方，手把手教学）
如何使用图标呢? 如果不想看前面介绍的话,直接最后一个标题即可点我快捷跳转 1. 介绍使用的时候,官方提供的使用方法总共三种. 第一种是:Unicode 第二种是:Font class 第三种是: ...
引用阿里云矢量图标库
1.登陆http://www.iconfont.cn/ 例如我需要购物车的图标 2.按下回车后会出现一堆的购物车图标 3.喜欢那个一个就鼠标移动到图标上去,加入购物车 4点击加入购物车后,就会出现在 ...
vue使用阿里云矢量图
vue使用阿里云矢量图在vue中虽然使用了elementui中的图标,但是会发现图标数量有限,不能够适(zhuang)用(bi)系统,因此在vue中使用阿里云矢量图. 添加矢量图到"购物车 ...
阿里妈妈矢量图标使用
1.登陆 http://www.iconfont.cn/ 阿里妈妈矢量图标库 2.登陆,可以使用GitHub账号或者其他账号登陆 3.选择将要使用的主题图标,或者在搜索栏里面搜索需要的图标 4.将需要 ...
阿里云账号注册流程方法（图文教程）
购买阿里云服务器.域名或者其他云产品都需要阿里云账号,而且账号必须实名认证否则购买不了,云吞铺子分享账号注册流程方法及常见问题解答: 阿里云账号注册流程方法 1. 先打开阿里云官网www.aliyun ...
阿里云商标注册申请进度查询方法
阿里云商标申请进度查询可以通过手机微信接收商标申请进度信息,在阿里云公众号"阿里云企航"中即可接收商标注册申请进度查询.商标注册申请提交到商标局后需要长达数月的审查过程,实时查询商 ...
discuz配置阿里云企业邮箱smtp方法
discuz配置阿里云企业邮箱smtp方法由于最新的阿里云ECS屏蔽了25端口,官方给出的办法是把25换成80,笔者测试可用配置界面如下, 配置前确保您的阿里云企业邮箱开启了smtp 功能 AD: ...

阿里云矢量图标使用方法

第一种方法

第二种方法

阿里云矢量图标使用方法相关推荐

最新文章

热门文章