关于阿里矢量图标的普通无色和彩色的使用方法

2024-05-10 11:51:43

登录阿里矢量图标库

在页面中选择喜欢图标库点进

鼠标悬停想要的图标选择添加入库

鼠标悬停想要的图标选择添加入库

点击购物车图标选择添加至项目（如果没有就创建一个）

第一种点击生成在线地址

引入在线地址即可

第一种点击下载到本地

使用无色的字体图标

解压缩，放到本地项目目录文件夹中，link引入

基本代码

从项目库中复制要使用图标的类名

复制到代码中

字体图标就能使用了

图标太小，可以自定义一个类名，添加一些样式

无色的字体图标就可以正常使用了

使用有色的字体图标

在无色图标基础上，引入js文件

设置固定样式（必写）

使用svg标签，在href=“# 字体图标的类名”

继续从官网上复制有色图标的类名

填写到在href=“# 字体图标的类名”

有色图标就可以使用了

图标太小我们给svg的class添加自定义类名

有色图标就可以使用了

后期如果我们要添加更多的字体图标的方法

选好要新增的字体图标，添加到之前建的项目文件夹中

点击更新新的在线或者离线代码

点击链接生成离线代码

接下来复制离线代码，把之前下载的css文件代码覆盖一下，有色的图标还有覆盖一下js代码

接下来使用新的字体图标类名就可以了

完美使用阿里巴巴矢量图标库框架

有色图标的必填代码：

.icon {

width: 1em;

height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

<svg class="icon" aria-hidden="true">

<use xlink:href="#图标的类名"></use>

</svg>

关于阿里矢量图标的普通无色和彩色的使用方法相关推荐

阿里矢量图标iconfont在微信小程序的使用
阿里矢量图标iconfont在微信小程序的使用第一步:进入官网: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 ...
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历首先在阿里矢量图标库选择自己喜欢的图标加购物车如下图点击右上角的购物车添加到项目这里有坑首先你不选中在线链接你是看不到 @font-f ...
阿里矢量图标(字体图标)使用
一.阿里矢量图标(字体图标) 网址:https://www.iconfont.cn/ #### 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择 ...
在uniapp里面使用阿里矢量图标（iconfont）
1.到阿里矢量图标官网找到需要的图标.添加进购物车. 2.打开购物车,选择下载代码 3.将下载下来的压缩包打开,打开里面的demo_index.html文件,并将压缩包里面的iconfont.ttf文 ...
CSS阿里矢量图标(字体图标)
网址: https://www.iconfont.cn 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择下载代码,下载完成后解压文件 5.把下载 ...
vue框架项目中使用阿里矢量图标库
vue框架项目中使用阿里矢量图标库一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码二.解压缩包,将解压缩后的文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...
# 一、阿里矢量图标(字体图标)网址：https://www.iconfont.cn/#### 1.使用步骤1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右
一.阿里矢量图标(字体图标) 网址:iconfont-阿里巴巴矢量图标库 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择下载代码,下载完成后解 ...
layui内置图标不满足需求，自定义添加阿里矢量图标
layui添加阿里矢量图标适用于layui内置图标不够用的情况 1.第一步进入阿里矢量图标官网,选择自己的图标,加入购物车,点击下载代码 2.第二部,解压下载的文件,复制所有内容,到项目中这里再 ...
【sciter】：sciter 使用阿里矢量图标库
sciter 使用阿里矢量图标库步骤一:选择要使用的图标,并添加到项目中(阿里矢量官网中的项目) 步骤二(关键):选中项目设置,在字体格式中选择TTF,其他不选,保存步骤三:点击 Font cla ...
layui引用阿里矢量图标
layui-pear-admin添加阿里矢量图标可能需要用到的注册阿里矢量图标账号导入并下载项目使用icon 可能需要用到的阿里矢量图标地址:https://www.iconfont.cn/ ...

最新文章

热门文章