mui如何添加自定义icon图标-蒲公英云

mui如何添加自定义icon图标

浏览器访问阿里巴巴图标库网
https://www.iconfont.cn/
在这里插入图片描述
下载代码：

修改css

为保证和mui目录结构统一，建议将字体文件放在fonts目录下，这样我们需要修改@font-face下得url属性；
只兼容iOS和Android版本的话，我们仅需要ttf格式的字体即可，其它字体可以删除；同时，我们也仅需保留-webkit前缀语法，-moz前缀部分可以删除；

原css为：

@font-face { font-family: "iconfont";
  src: url('iconfont.eot?t=1603698027865'); /* IE9 */
  src: url('iconfont.eot?t=1603698027865#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANkAAsAAAAAB8QAAAMXAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDKIJlATYCJAMMCwgABCAFhG0HOhuvBhHVmwvIfh44xtoRK+tqjx8neB1W1Ei6z0E82X1V9+sZ7x5EzT9jwezgSIphhIymAQKmxm7NWTWUEyZqsiRrRx79Q54K+UvTQfYD//3P5fTuKmqDzf9eHks45qSxJmZpHFBAYwyLIiuyhLRleG2X6rDuQwE+pdWkOnbuORAXA12mADVz2pRxuBkzpqFY4aKwK/Ya1G4sXL1F3wR2Bd9XP6ifCxpLoA/1ndxpIm0/D/08WaI4YqREJKZzAuIhEKAmMKBGV7qHIlGsJsHX1aY528ag0FMF45hAbCht9ocHGgXKhhaGAFRFlb4oiSNONJNBetXVAoANYj4bgDQoqSAuC6tgodCY17ibliWfuVLaCkz6kSDPtmMlop+cdWnM1sKTU7YWnLj/YEpmkSmp2wpNOpCeNjHcmpJIDZK2HYj2D5ToRZIOpK1I3rq/oA3CccalFnFSUpYmO3nmJiH/RIofbt0fHRhCHBZg/uaGRFHdWFKqp6gl+aP8SxSeK/HGTc6A+53q++WftVigc+sufNr0W4X/uUnr817z6j92b+S/5HmBAjecaYLpZt6UAJ03nenwUL6L0eN8I99NGq3tUe+iO9i96AU71IdBUfWoyOnT/sX8F33s866ja9Fvz1f9hsmMBWJxRmRNlFhmSNt/9Rx7zydfG5On5W83MAC8uJQzI2jrnoeLBlHyZ1RmMoTckFGzGE1YLe1ahNAL675b8PGBGPz5vR6uL3T3CYVLoQQ0DqVAcKmIGkJNsAhoCDYubcCnhi6HAwqYj6CMB1S3gYAir1OgSeYqCHndQg3hFVgU9gts8ibgY787nLl3LO5OjErQgv5DNDQ52ya7sPiOfhkUp2UB4408xyA0ZZ1P3nBCnmLD/PGtiAPHNMKVPIbDQJCZEhopg0juqspVvak0NBY7JwwpAllA+wORQSbOGyx2hc/fIW8xULihq877htgsjg4apboDelNPnbpu5ZXZh9cSwgEOIyNwJU40sBgBuXpWggxRCgMiWafCXq6rulxeO77fIcBHz5O0EmVYXU2+X9ZakY6OqSgAAA==') format('woff2'),
  url('iconfont.woff?t=1603698027865') format('woff'),
  url('iconfont.ttf?t=1603698027865') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1603698027865#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont { 
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-cangku:before { 
  content: "\e666";
}
.icon-baobiao:before { 
  content: "\e658";
}

修改后为：

@font-face { 
    font-family: iconfont;
    font-weight: normal;
    font-style: normal;
    src:  url('../fonts/iconfont.ttf') format('truetype'); /* iOS 4.1- */
}
.iconfont { 
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-cangku:before { 
  content: "\e666";
}
.icon-baobiao:before { 
  content: "\e658";
}

将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下，然后即可在mui中引用刚生成的字体图标，我们以选项卡为例，代码如下：

底部导航修改前

<nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item" href="index.html" data-id="looks">
                <span class="mui-icon mui-icon-home "></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" href="tab-webview-subpage-Personal.html" data-id="Personal">
                <span class="mui-icon mui-icon-contact"></span>
                <span class="mui-tab-label">我的</span>
            </a>
        </nav>

底部导航修改后

<link rel="stylesheet" href="css/iconfont.css" />
        <nav class="mui-bar mui-bar-tab">
                    <a class="mui-tab-item" href="index.html" data-id="looks">
                        <span class="mui-icon iconfont icon-cangku"></span>
                        <span class="mui-tab-label">首页</span>
                    </a>
                    <a class="mui-tab-item" href="tab-webview-subpage-Personal.html" data-id="Personal">
                        <span class="mui-icon iconfont icon-baobiao"></span>
                        <span class="mui-tab-label">我的</span>
                    </a>
        </nav>