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等),如下代码即可显示一个计算器图标:
<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"; }运行之后,效果如图:
步入前端的坑,看我如何一步步填坑,哈哈哈哈