以MUI框架為例，內(nèi)容來自于MUI官網(wǎng)。

mui如何增加自定義icon圖標

mui框架遵循極簡原則，在icon圖標集上也是如此，mui僅集成了原生系統(tǒng)中最常用的圖標；其次，mui中的圖標并不是圖片，而是字體，至于為什么使用字體圖標而不是圖片，相信web開發(fā)者多少都有所了解，簡單列舉幾條：

• 多個圖標字體合成一個字體文件，避免每張圖片都需要聯(lián)網(wǎng)請求；
• 字體可任意縮放，而圖片放大會失真、縮小則浪費像素；
• 可通過css任意改變顏色、設(shè)置陰影及透明效果；

在實際項目中，開發(fā)者難免會需要自定義圖標，此時該如何操作呢？本文以阿里巴巴矢量圖標庫為例（同樣的網(wǎng)站有很多，比如icomoon，歡迎熱心用戶分享其它平臺的使用方法），介紹一種用戶自定義圖標的方法，假設(shè)我們要做一個電商項目，需要補充男裝、女裝、購物車三個圖標，如下為分步實現(xiàn)操作；

登錄

瀏覽器訪問阿里巴巴矢量圖標庫官網(wǎng)，選擇登錄方式，可直接使用新浪微博賬號登錄；

搜索圖標

在右上角搜索“男裝”，會列出當前網(wǎng)站上的所有男裝圖標，如下：

選擇自己喜歡的圖標，點擊，會添加到右上角的購物車中，如下：

同樣的方式分別搜索選擇女裝、購物車圖標，結(jié)果如下：

之后點擊“存儲為項目”，輸入項目名字，例如“mui-icon-custom”，點擊“存儲”按鈕后，會跳轉(zhuǎn)到項目管理頁面，如下圖所示：

下載字體

點擊“下載到本地”按鈕，會將合并后的字體文件及自動生成的css全部下載，如下：

修改css

默認的css代碼如下：

@font-face {font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#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-nanzhuang:before { content: "\e600"; }

.icon-nvzhuang:before { content: "\e601"; }

.icon-gouwuche:before { content: "\e602"; }

我們可稍作如下修改：

• 為保證和mui目錄結(jié)構(gòu)統(tǒng)一，建議將字體文件放在fonts目錄下，這樣我們需要修改@font-face下得url屬性；
• 只兼容iOS和Android版本的話，我們僅需要ttf格式的字體即可，其它字體可以刪除；同時，我們也僅需保留-webkit前綴語法，-moz前綴部分可以刪除；

修改后的css代碼如下：

@font-face {font-family: "iconfont";
src:url('../fonts/iconfont.ttf') 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;
}

.icon-nanzhuang:before { content: "\e600"; }

.icon-nvzhuang:before { content: "\e601"; }

.icon-gouwuche:before { content: "\e602"; }

集成mui

將iconfont.css及iconfont.ttf兩個文件分別拷貝到mui工程css及fonts目錄下，然后即可在mui中引用剛生成的字體圖標，我們以選項卡為例，代碼如下：

<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon iconfont icon-nanzhuang"></span>
<span class="mui-tab-label">男裝</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-nvzhuang"></span>
<span class="mui-tab-label">女裝</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-gouwuche"></span>
<span class="mui-tab-label">購物車</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設(shè)置</span>
</a>
</nav>

主要代碼：將mui默認的icon（如mui-icon-home）替換成iconfont icon-nanzhuang，修改后預(yù)覽效果如下：

轉(zhuǎn)載于:https://www.cnblogs.com/liuyanxia/p/9207396.html

總結(jié)

以上是生活随笔為你收集整理的在项目中增加自定义icon图标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。