在页面中,我们有时候对一个图标可能比较灵活,动态设置颜色等等,就会用到字体图标
这里要注意,如果想下载字体格式,先把字体加入到购物车,进入购物车,会发现有一个下载代码,下载后,会把字体文件打包下载下来。
接下来可以通过直接在项目中引用字体文件来使用,也可以把字体转成base64来使用,我们这里说一下怎么把字体格式转base64。
第一步
进入https://transfonter.org/字体转换网站,进入后有一个 Add fonts 按钮,添加一个字体文件,这里上传的是TTF格式文件,把刚刚阿里图标库下载的字体包,里面的TTF文件上传上去,然后有一个Formats选项,把TTF勾选上,其余的都不选,然后再把Base64 encode开关打开,最后点击Convert按钮,下载下来,打开stylesheet.css 文件,里面就是生成的字体base64,就可以贴在代码中了。
@font-face {
font-family: 'iconlove';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQ........... format('truetype');
font-weight: normal;
font-style: normal;
}
上面代码就是下载下来的
.iconlove {
font-family: "iconlove" !important;
font-size: 16px;
font-style: normal;
color: #B2B2B4;
}
在这个基础上,我们可以扩充相关的样式
第二步
第二步也是最后一步,那就是增加一个样式
刚刚从阿里图标库下载的包,找到iconfont.css的文件,里面有这样一个样式
.icon-icon-test:before {
content: "\e608";
}
找到后和前面的两个样式代码放在一起,就能生效啦!!!