字体图标官网:iconfont-阿里巴巴矢量图标库
1. 添加字体图标入库
在官网找到需要使用的字体图标,添加入库
2. 下载字体图标
所有图标添加完成后,点击右上方购物车图标,点击添加至项目
点击添加至项目后,他会跳转到响应的项目页面,这时点击下载至本地
3. 引入对应文件
将下载完成后的压缩包解压后,需要将这四个文件放入项目文件夹中
注意:如果iconfont.css和其他三个字体文件不在同一个目录,需要修改iconfont.css中的src路径
@font-face {
font-family: "iconfont"; /* Project id 4298372 */
src: url('iconfont.woff2?t=1698042464558') format('woff2'),
url('iconfont.woff?t=1698042464558') format('woff'),
url('iconfont.ttf?t=1698042464558') format('truetype');
}
在用到字体图标的html中,引入iconfont.css文件
<link rel="stylesheet" href="iconfont.css">
4. 使用字体图标
第一种方法:Unicode编码
将图标的Unicode编码写入标签内,需要给标签加上class名:iconfont
<div class="iconfont">这是一个购物车</div>
第二种方法:class类名
将图标的class名写入标签的class内,需要加上class名:iconfont
<div class="icon-gouwucheman iconfont">这是一个购物车</div>
第三种方法:伪类 :before / :after
在iconfont.css文件中,可以找到对应class类名的伪类,其中content引号中的就是图标代码
.icon-gouwucheman:before {
content: "\e601";
}
在标签伪类的content写入即可,需要给标签加上class名:iconfont
.box:after {content: "\e601"}
<div class="box iconfont">这是一个购物车</div>
5. 字体图标的特点
字体图标可以像文字一样,使用font-size更改大小,使用color设置颜色等等
注意:在iconfont.css中,设置了iconfont类名的一些样式,其中有font-size: 16px;
更改图标大小需要注意权重,或者在iconfont.css文件里将此条删除
字体图标官网:iconfont-阿里巴巴矢量图标库