阿里云矢量图标的使用

阿里图标官网：https://www.iconfont.cn/

创建“我的项目”，获取css链接:

两种使用方法：

一.本地引用

1.引入iconfont 的css

<link rel="stylesheet" type="text/css“  href="font/iconfont.css">

2.设置class属性

<i class="iconfont iconwode"></i>

3.设置样式

<i class="iconfont iconwode" style="font-size: 30px; color: red;"></i>

二. 在线引用

1. 将生成的http域名地址引入

 <link href="http://at.alicdn.com/t/font_1140708_49fgy6j800s.css" rel="stylesheet" />

2. 复制图标类名并设置class属性

<p><i class="iconfont iconwode" ></i>我的</p>

3. 设置样式

 <i :class="'iconfont ' + item.icon"></i>

其中item.icon是图标名称

阿里云图标使用i包裹来更改样式

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

uni-app（一）----引入阿里云矢量图标库
这段时间因为老师要求,要做一个小程序,所以开始学一下uni-app开发,以后我会把我学的东西都发出来.现在写一下关于引入阿里云矢量图标库的方法添加图标首先去官网选择你喜欢的图标你可以在这搜索你想 ...
uniapp如何引入阿里云矢量图标库
最近搞了下uniapp的开发,写一下关于引入阿里云矢量图标库的方法: 首先说下我走过的坑吧,我直接把图标zip包下下来放在static里面,在App.vue的style中引入,保存,后面查了下,微信小 ...
html引用阿里云矢量图标（不照搬官方，手把手教学）
如何使用图标呢? 如果不想看前面介绍的话,直接最后一个标题即可点我快捷跳转 1. 介绍使用的时候,官方提供的使用方法总共三种. 第一种是:Unicode 第二种是:Font class 第三种是: ...
引用阿里云矢量图标库
1.登陆http://www.iconfont.cn/ 例如我需要购物车的图标 2.按下回车后会出现一堆的购物车图标 3.喜欢那个一个就鼠标移动到图标上去,加入购物车 4点击加入购物车后,就会出现在 ...
vue使用阿里云矢量图
vue使用阿里云矢量图在vue中虽然使用了elementui中的图标,但是会发现图标数量有限,不能够适(zhuang)用(bi)系统,因此在vue中使用阿里云矢量图. 添加矢量图到"购物车 ...
uin-app 使用阿里云iconfont图标
uin-app 使用阿里云iconfont图标介绍开始 1. 去阿里云图标选择自己,需要的图标,然后加入购物车. 2. 进入购物车,下载源码 3. 下载好以后,解压,把压缩包里面的文件放在相应的位 ...
阿里妈妈矢量图标使用
1.登陆 http://www.iconfont.cn/ 阿里妈妈矢量图标库 2.登陆,可以使用GitHub账号或者其他账号登陆 3.选择将要使用的主题图标,或者在搜索栏里面搜索需要的图标 4.将需要 ...
react-next 引入阿里云iconfont 图标（适用所有）
进入阿里云图标库搜索想要的图标地址: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 随便找一个加入购物车添 ...
Qt 使用阿里云字体图标
阿里云图标下载选择下载svg ( 当然你可以选择下载png , 然后按照 qt正常设置图片的方法 , 经过测试 , 还是应该选择这种方法) 2. 详解使用icomoon生成字体图标的方法并应用 ht ...

阿里云矢量图标的使用

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

最新文章

热门文章