How to add custom icon icons in mui

Browser visit Alibaba icon library website
https://www.iconfont.cn/ to

download code:

modify css

1. In order to ensure the uniformity of the mui directory structure, it is recommended to put the font file in the fonts directory, so we need to modify the url attribute under @font-face;
2. If only compatible with iOS and Android versions, we only need fonts in ttf format, and other fonts can be deleted; at the same time, we only need to keep the -webkit prefix syntax, and the -moz prefix part can be deleted;

The original css is:

@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";
}

After modification:

@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";
}

Copy the two files iconfont.css and iconfont.ttf to the css and fonts directories of the mui project respectively, and then you can reference the newly generated font icon in mui. Let's take the tab as an example. The code is as follows:

Before the bottom navigation is modified

		<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>

After the bottom navigation is modified

		<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>

The effect is as follows: