文章轉自https://blog.csdn.net/weixin_36185028/article/details/53416185
這里就用到了兩個文件，一個是icontfont.css,另外一個是icontfont.ttf,
在開發過程中，往往需使用到各式各樣的icon圖標，而有的圖標庫提供的資源並不多，由於icon圖標屬於字體樣式，如果使用圖片替代的話，缺點比較明顯，比如放大失真，每次聯網都要加載等。所以往往需要自己利用其他的icon圖標庫自定義圖標樣式，下面借用阿里巴巴矢量圖標庫為例分享一下如何在前端項目中自定義icon圖標。
其中，紅色字體標出來是容易漏掉的步驟。
一．登陸阿里巴巴矢量圖標庫
打開網址：http://www.iconfont.cn/plus
准備好新浪博客或Github賬號，登陸
二．挑選和下載圖標
在搜索框搜索自己需要的圖標，然后鼠標已到看中的圖標上方，一個個加入購物車，推薦選擇相同類型下的看起來盡可能大的圖標，便於后面設置樣式。
點擊購物車，添加至項目，默認選中“鏈接”，點擊確定，跳轉到項目界面，選中右側“鏈接”（默認是選中的），然后點擊下載至本地
下載下來的項目壓縮包名是一串字母數字等組成，解壓得到如下文件，其中前三個html文件提供的是教程，真正有用的是其他的文件
三．修改相關樣式
將整個解壓后的項目文件夾導入前端項目中
如果只兼容安卓和IOS移動端的話，那么只需要iconfont.css文件和iconfont.ttf文件即可，其中iconfont.css文件是必需的；
將iconfont.css復制到你的APP項目的css文件夾中，將iconfont.ttf放到fonts文件夾中（沒有就新建一個），比如我的項目是Gfilm副本：兩文件放的位置如下圖：
在css文件夾中打開iconfont.css文件，如下：
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1480523339684'); /* IE9*/
src: url('iconfont.eot?t=1480523339684#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1480523339684') format('woff'), /* chrome, firefox */
url('iconfont.ttf?t=1480523339684') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1480523339684#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-yanchu:before { content: "\e605"; }
.icon-dianying:before { content: "\e633"; }
.icon-faxian:before { content: "\e642"; }
.icon-cinema:before { content: "\e60c"; }
其實從后面的代碼拼音或英文可以看出我們需要的圖標。
因為兼容IOS和安卓端只需要tff文件所以刪除其他的url,把tff文件來源改成引用當前APP項目的fonts文件夾的來源，此處沒有提示，需要手敲進去，修改后的iconfont.css如下：
注意：此處有坑，由於iconfont.css是url連續導入的，中間用逗號隔開，所以修改后的句尾要改成分號。
@font-face {font-family: "iconfont";
src: url('../fonts/iconfont.tff') format('truetype');/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-yanchu:before { content: "\e605"; }
.icon-dianying:before { content: "\e633"; }
.icon-faxian:before { content: "\e642"; }
.icon-cinema:before { content: "\e60c"; }
四．引入樣式
打開APP項目中網頁，在head引入iconfont.css樣式
<link rel="stylesheet" type="text/css"href="css/iconfont.css"/>
在導航欄的nav位置里面a標簽里面的span的class屬性里面在后面先添加iconfont類名，再添加 icon圖標名字，就是iconfont.css代碼末尾那些拼音或英文，敲出時候會發現有相關提示。如下所示，紅色字體為添加的類名：
<nav class="mui-scroll mui-bar mui-bar-tab" style="background: #FF0033;">
<a class="mui-tab-item mui-active" href="#tabbar">
<span class="mui-icon iconfont icon-dianying">
</span>
<span class="mui-tab-label">電 影</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon iconfont icon-cinema">
</span>
<span class="mui-tab-label">影 院</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon iconfont icon-yanchu">
</span>
<span class="mui-tab-label">演 出</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon iconfont icon-faxian">
</span>
<span class="mui-tab-label ">發 現</span>
</a>
</nav>
到此出一般都能顯示出圖標了，如果不顯示，請檢查iconfont.css里面的是否正確導入，比如../fonts/iconfont.tff中的../是否漏掉，活着末尾逗號沒有改成分號。
五．常見其他問題
導入圖標沒有顯示在文字的正上方或者圖標全部高亮狀態，如下圖：
文字和圖標沒有對其的解決辦法：
在span中添加id選擇器，然后在style標簽內設置margin-left樣式，建議使用百分比，當然也可以用class樣式設置，此時在阿里巴巴矢量庫中選擇的大一點的圖標就比較好調了。
MUI框架下圖標全部高亮的解決辦法：
找到style樣式中的這段代碼：
span.mui-icon {
font-size:14px;
color:#007aff;
margin-left:-15px;
padding-right:10px;
}
可以看到該選擇器限定了color，把color: #007aff;去掉即可。
---------------------
作者：騎着代碼去流浪
來源：CSDN
原文：https://blog.csdn.net/weixin_36185028/article/details/53416185
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！