阿里巴巴矢量圖標庫 字體圖標的下載與使用


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>中使用
 
 如果文章對你有幫助,麻煩幫忙點個贊哦!嘿嘿!做一個靠譜的技術博主!
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM