浏览器访问阿里巴巴图标库网
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>
效果如下: