HBuilder MUI 使用擴充圖示樣式問題解決

MUI工程,預設會提供很多圖示,直接使用會是這樣的效果:

    預設圖示的css樣式是正常的,為兩行,但當導入擴充圖示,在index.html界面,導入css,如下:

使用示例：

* 在對應目錄引入

css/mui-icon-extra

fonts/mui-icons-extra.ttf

使用時隻需要在

span

節點上分别增加

.mui-icon-extra

、

.mui-icon-extra-name

兩個類即可（name為圖示名稱，例如：calc、new等），如下代碼即可顯示一個電腦圖示：

   如果你預設導入這個檔案,會有這樣的問題,圖示和文字不在一個方向,為水準了,如下截圖:

     解決方式:使用浏覽器開發者模式看到,預設圖示的樣式和擴充圖示樣式有不同,使用預設圖示的樣式,放在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"; }
           

     運作之後,效果如圖:

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