阿里巴巴矢量图标库 字体图标的下载与使用

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>中使用

 

 如果文章对你有帮助，麻烦帮忙点个赞哦！嘿嘿！做一个靠谱的技术博主！

 

转载于:https://www.cnblogs.com/CatcherLJ/p/11171809.html