阿里矢量图标库 - Font class 方式使用说明
目录一、下载二、引入方式一方式二方式三三、使用效果 1效果 2效果 3效果 4效果 5效果 6效果 7四、iconfont 冲突一、下载官网:https://www.iconfont.cn/1、先登录,将所需图标添加到购物车。2、选择“下载代码”。3、解压后的文件目录。4、这是我选的图标。二、引入在vue项目中使用,这是我的目录结构:方式一全局引入,在 index.html 文件中,使用 l.
目录
一、下载
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>
更多推荐
所有评论(0)