mui如何增加自定義icon圖標

mui如何增加自定義icon圖標

mui框架遵循極簡原則，在icon圖標集上也是如此，mui僅集成了原生系統中最常用的圖標；其次，mui中的圖標並不是圖片，而是字體，至於爲什麼使用字體圖標而不是圖片，相信web開發者多少都有所瞭解，簡單列舉幾條：

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

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

登錄

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

搜索圖標

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

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

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

之後點擊“存儲爲項目”，輸入項目名字，例如“mui-icon-custom”，點擊“存儲”按鈕後，會跳轉到項目管理頁面，如下圖所示：

下載字體

點擊“下載到本地”按鈕，會將合併後的字體文件及自動生成的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目錄結構統一，建議將字體文件放在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">設置</span>
        </a>
    </nav>

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