阿里巴巴矢量图标库 字体图标的下载与使用
1、进入阿里巴巴矢量图标库:http://www.iconfont.cn/
2、把需要的图标加入购物车
3、点击旁边的购物车,点击最下面的下载代码,download.zip。
4、代码下载完成后进行解压,找到ttf文件在这里进行转换:https://transfonter.org/,选择base64格式 ,转换步骤见文末(*╹▽╹*)
5、引入至样式文件
① 把转换后下载的压缩包解压,把 stylesheet.css 中的@font-face引入自己的 css
@font-face {
font-family: \’iconfont\’;
src:
font-weight: normal;
font-style: normal;
}
② 最初下载的 download.zip 中的 iconfont.css 中的 iconfont 引入自己的 css
如:
.iconfont {
font-family:”iconfont” !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-jian:before { content: “\f000f”; }
.icon-jia:before { content: “\e623”; }
.icon-paperplane:before { content: “\e617”; }
6、在标签<span class=\’iconfont icon-baihuo\’></span>中使用
如果文章对你有帮助,麻烦帮忙点个赞哦!嘿嘿!做一个靠谱的技术博主!
版权声明:本文为CatcherLJ原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。