阿里矢量图标库 - Font class 方式使用说明
目录
一、下载
二、引入
方式一
方式二
方式三
三、使用
效果 1
效果 2
效果 3
效果 4
效果 5
效果 6
效果 7
四、iconfont 冲突
一、下载
官网:iconfont-阿里巴巴矢量图标库
1、先登录,将所需图标添加到购物车。
2、选择“下载代码”。
3、解压后的文件目录。
4、这是我选的图标。
二、引入
在vue项目中使用,这是我的目录结构:
方式一
全局引入,在 index.html 文件中,使用 link 标签
<link rel="stylesheet" href="font/iconfont.css">
方式二
全局引入,在 main.js 文件中,使用 import
import '../public/font/iconfont.css'
方式三
局部引入,在单个 vue 文件的 <style> 标签中,使用 import。注意有 @ 和 ~。
@import '~../../public/font/iconfont.css';
三、使用
- 建议使用 span 标签,class 中必须引入 iconfont;
- 默认是黑色,可使用 color 修改;
- 默认大小是 16px,可使用 font-size 修改;
效果 1
引入 class='icon-bianji' 的图标, 使用默认样式。
<span class="iconfont icon-bianji"></span>
效果 2
引入 class='icon-pinglun' 的图标,自定义 class='icon-red' 设置图标为红色。
<span class="iconfont icon-pinglun icon-red"></span>.icon-red {color: red;
}
效果 3
引入 class='icon-wode' 的图标,自定义 class='icon-blue' 设置图标为蓝色,大小为 32px。
<span class="iconfont icon-wode icon-blue"></span>.icon-blue {font-size: 32px;color: rgb(0, 110, 204);
}
效果 4
引入 class='icon-wode' 的图标,自定义 class='icon-blue-opacity' 设置图标为蓝色半透明,大小为 32px。
<span class="iconfont icon-wode icon-blue-opacity"></span>.icon-blue-opacity {font-size: 32px;color: rgba(0, 110, 204, 0.5);
}
效果 5
引入 class='icon-wode' 的图标,自定义 class='icon-blue-shadow' 设置图标为蓝色有阴影,大小为 32px。
<span class="iconfont icon-wode icon-blue-shadow"></span>.icon-blue-shadow {font-size: 32px;color: rgb(0, 110, 204);text-shadow: rgb(0, 110, 204) 2px 2px 5px;
}
效果 6
引入 class='icon-wode' 的图标,自定义 class='icon-blue' 设置图标为蓝色,大小为 32px。
注意要在外面包一层才能旋转,对图标设置旋转无效。
<div class="icon-transform" ><span class="iconfont icon-wode icon-blue"></span>
</div>.icon-transform {display: inline-block;transform: rotate(-30deg);
}
.icon-blue {font-size: 32px;color: rgb(0, 110, 204);
}
效果 7
引入 class='icon-wode' 的图标,自定义 class='icon-blue' 设置图标为蓝色,大小为 32px,hover 时改为绿色。
<span class="iconfont icon-wode icon-blue"></span>.icon-blue {font-size: 32px;color: rgb(0, 110, 204);
}
.icon-blue:hover {color: green;
}
四、iconfont 冲突
当引入多个 iconfont 图标库时,会存在重复定义。或你想对 iconfont 做一些专属效果。修改方式如下:
找到 iconfont.css 文件,将 .iconfont 改为 my-iconfont 即可(也可以是其它命名)。
使用
<span class="my-iconfont icon-bianji"></span>
阿里矢量图标库 - Font class 方式使用说明相关推荐
- 阿里巴巴矢量图标库-iconfont使用方式
阿里巴巴矢量图标库-iconfont使用方式 在项目开发的过程中,我们经常会使用到图标进行页面的修饰.如果使用图片,往往会遇到失真的情况,而且图片数量很多的话,页面加载也会变得很慢.所以,我们可以使用 ...
- 【sciter】:sciter 使用阿里矢量图标库
sciter 使用阿里矢量图标库 步骤一:选择要使用的图标,并添加到项目中(阿里矢量官网中的项目) 步骤二(关键):选中项目设置,在字体格式中选择TTF,其他不选,保存 步骤三:点击 Font cla ...
- uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历 首先在阿里矢量图标库选择自己喜欢的图标 加购物车如下图 点击右上角的购物车 添加到项目 这里有坑 首先你不选中在线链接 你是看不到 @font-f ...
- vue框架项目中使用阿里矢量图标库
vue框架项目中使用阿里矢量图标库 一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码 二.解压缩包,将解压缩后的 文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...
- 在uni-app里面怎么引入阿里矢量图标库?
最近在学习uni-app,每次在需要用到icon的时候都得下载下来,感觉好麻烦,所以就找到了直接引入阿里矢量图标库的方法,妈妈再也不用担心我为下载icon的样式不规范而发愁了,以下方法供大家参考 在图 ...
- Vue项目中,引入阿里矢量图标库
Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...
- vue前端项目中使用阿里矢量图标(Font class)
一.登录阿里巴巴矢量图标库 阿里巴巴矢量图标库 二.点击图标库 三.选择图标 选择图标后,会进入该类型的图标库,然后鼠标划上想选择的那个图标,会有三个选择,分别为"添加入库", & ...
- vue项目中使用阿里矢量图标库
1.下载图标代码在本地 2.将一下文件放在一个文件夹比如icon文件夹下,将icon放在assets文件夹下,如图 3.在main.js中导入 import './assets/icon/iconfo ...
- 微信小程序自定义组件使用阿里矢量图标库图标
有时候我们有这一种需求:在使用组件的时候,希望能传入自己写的class样式. 测试了一番,直接传递class参数是无效的,那我们怎么做呢? 开始实践 仔细查阅了官方文档,发现是可以的. 我们首先在组件 ...
- iconfont-阿里巴巴矢量图标库使用js方式更更改不了图标颜色解决方法
给使用的ioc组件加个类名,然后在类名样式里加 fill:red(想要的样式)
最新文章
- to_char 函数将小数点舍掉的解决办法
- 函数平移口诀_八年级数学下册:一次函数的图像,平移口诀是“上加下减,左加右减”...
- ASP.NET Core 借助 K8S 玩转容器编排
- 10月31日随笔 成人礼
- 【转】Linux下软件安装的几种方式
- Shared_ptr与 boost::any
- php和jsp有什么区别,php和jsp之间的区别是什么
- libnet库的安装与使用
- 手扶电梯缺陷检测图像数据集(VOC标签)
- 基于深度图像的行人检测、跟踪技术研究_周波_2014
- Snapchat面经
- LivePlayer H5播放器(实时视频和历史视频)
- 3DMAX 隐藏显示物体的快捷键
- 计算机网络工程的话术,话术工具电脑版
- Android8.0后静态广播以及有序广播的使用
- 软件测试之实用小工具推荐
- 【20221119】【每日一题】解数独
- Windows下反(反)调试技术汇总
- 三种查看MySQL数据库版本的方法
- 南大计算机学硕调剂,2017年南京大学计算机科学与技术系考研复试名单