前端項目添加自定義icont圖標步驟

文章轉自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;

}