HBuilder MUI 使用擴展圖標樣式問題解決

MUI工程,默認會提供很多圖標,直接使用會是這樣的效果:

    默認圖標的css樣式是正常的,爲兩行,但當導入擴展圖標,在index.html界面,導入css,如下:

使用示例：

* 在對應目錄引入css/mui-icon-extrafonts/mui-icons-extra.ttf

使用時只需要在span節點上分別增加.mui-icon-extra、.mui-icon-extra-name兩個類即可（name爲圖標名稱，例如：calc、new等），如下代碼即可顯示一個計算器圖標：

	<span class="mui-icon-extra mui-icon-extra-calc"></span>

   如果你默認導入這個文件,會有這樣的問題,圖標和文字不在一個方向,爲水平了,如下截圖:

     解決方式:使用瀏覽器開發者模式看到,默認圖標的樣式和擴展圖標樣式有不同,使用默認圖標的樣式,放在icons-extra.css中,就可以解決,如下icons-extra.css文件修改如下:

  

@font-face {
    font-family: MuiiconSpread;
    font-weight: normal;
    font-style: normal;
    src:  url('../fonts/mui-icons-extra.ttf') format('truetype'); /* iOS 4.1- */
}
.mui-icon-extra
{
    font-family: MuiiconSpread;
    font-size: 24px;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
}

.mui-bar-tab .mui-tab-item .mui-icon~.mui-tab-label {
    font-size: 11px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mui-bar-tab .mui-tab-item .mui-icon-extra {
    top: 3px;
    width: 24px;
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
}

.mui-bar .mui-icon-extra {
    font-size: 24px;
    position: relative;
    z-index: 20;
    padding-top: 10px;
    padding-bottom: 10px;
}

.mui-icon-extra-cold:before { content: "\e500"; }
.mui-icon-extra-share:before { content: "\e200"; }
.mui-icon-extra-class:before { content: "\e118"; }
.mui-icon-extra-custom:before { content: "\e117"; }
.mui-icon-extra-new:before { content: "\e103"; }
.mui-icon-extra-card:before { content: "\e104"; }
.mui-icon-extra-grech:before { content: "\e105"; }
.mui-icon-extra-trend:before { content: "\e106"; }
.mui-icon-extra-filter:before { content: "\e207"; }
.mui-icon-extra-holiday:before { content: "\e300"; }
.mui-icon-extra-cart:before { content: "\e107"; }
.mui-icon-extra-heart:before { content: "\e180"; }
.mui-icon-extra-computer:before { content: "\e600"; }
.mui-icon-extra-express:before { content: "\e108"; }
.mui-icon-extra-gift:before { content: "\e109"; }
.mui-icon-extra-gold:before { content: "\e102"; }
.mui-icon-extra-lamp:before { content: "\e601"; }
.mui-icon-extra-rank:before { content: "\e110"; }
.mui-icon-extra-notice:before { content: "\e111"; }
.mui-icon-extra-sweep:before { content: "\e202"; }
.mui-icon-extra-arrowleftcricle:before { content: "\e401"; }
.mui-icon-extra-dictionary:before { content: "\e602"; }
.mui-icon-extra-heart-filled:before { content: "\e119"; }
.mui-icon-extra-xiaoshuo:before { content: "\e607"; }
.mui-icon-extra-top:before { content: "\e403"; }
.mui-icon-extra-people:before { content: "\e203"; }
.mui-icon-extra-topic:before { content: "\e603"; }
.mui-icon-extra-hotel:before { content: "\e301"; }
.mui-icon-extra-like:before { content: "\e206"; }
.mui-icon-extra-regist:before { content: "\e201"; }
.mui-icon-extra-order:before { content: "\e113"; }
.mui-icon-extra-alipay:before { content: "\e114"; }
.mui-icon-extra-find:before { content: "\e400"; }
.mui-icon-extra-arrowrightcricle:before { content: "\e402"; }
.mui-icon-extra-calendar:before { content: "\e115"; }
.mui-icon-extra-prech:before { content: "\e116"; }
.mui-icon-extra-cate:before { content: "\e501"; }
.mui-icon-extra-comment:before { content: "\e209"; }
.mui-icon-extra-at:before { content: "\e208"; }
.mui-icon-extra-addpeople:before { content: "\e204"; }
.mui-icon-extra-peoples:before { content: "\e205"; }
.mui-icon-extra-calc:before { content: "\e101"; }
.mui-icon-extra-classroom:before { content: "\e604"; }
.mui-icon-extra-phone:before { content: "\e404"; }
.mui-icon-extra-university:before { content: "\e605"; }
.mui-icon-extra-outline:before { content: "\e606"; }

     運行之後,效果如圖:

 

     步入前端的坑,看我如何一步步填坑,哈哈哈哈