现在H5前端框架众多,如iView、Mint UI 、MUI 等,由于最近刚接手的一个微信应用是使用的MUI,那么就只得直接杠上了。MUI 号称最接近原生APP体验的高性能前端框架,那么当然有必要尝试一下,但是它自带的图片真的少啊
诺,是不是真的觉得少呢,别担心,我们可以自己来新增自己想要的
iconfont
图片,不知道大家知不知道有个
icnofont
的图标库,里面有上千万的图标,非常之丰富
那么我们怎么把icnofont图标库的图标添加到MUI中呢?来,我去研究一下吧。
怎么进入到网站呢,在百度搜索
icnofont
即可
然后,登陆进去(如果只是简单的逛逛,就不需要了),这里我选择的是
Github
方式。
现在就可搜索我们想要的图标了,
把中意的图标加入的库中
将库中的图标下载到本地,这里有三种方式,
将下载的文件解压后会看到下面这些文件
再打开
iconfont.css
文件,可以看到这样的代码
既然到这里了,那么我觉得我们有必要简单了解一下**@font-face**的用法,
@font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1597645001364'); /* IE9 */ src: url('iconfont.eot?t=1597645001364#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAN8AAsAAAAAB3gAAAMvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCYIJBATYCJAMMCwgABCAFhG0HOBuJBsiuMSYy1L1IFdqEbpi1rqDJuy75inf66neOxcPX2O/P3V1MJDE000qSxJDwTqWSTOpP5afwp2sJ7+fH2fv7kxjXcAzJalM7I0GVrJcuokGuPlhXc0K7UCakI19KR88K83KqYCifvqrUb4Yqz3qgjBPR1cyn9Hoe6mI3wA7irFQFAP6fy+ndVZTI/JblMsfEe0e9AOOAAhpr04EEXCAJesPYBS3xOIF6w5zQbvJBE/wKc1wgbivFGfgzIUVh2VqhumJpEU/gUZseCFvAY/D9+A9LQSWpysyph+ebS1j5LXvI4vr/O0MPAfF0DrBVZCwChTitdJ1wRalFWL2qcjcXVytCmir6fwKRpqi2/vBIgqhmVjaCWaRMFyV2uCT+ZCVXfUoG1ajBJfCGaJ15WWmsazRvnaBqZ6e5u9va3+/s7Q0nPhpmu6brp9J565yRo9GUScYpV7fbvMPeXXv/vrN729q5UYxp26+fjK5dvueswqk5KdD729AxOIpGZ+ida0ZjX6avXeMyGBrrnJBrcWDd/bPyZfE9gYtLQnlnrNiheHNhOr6oAz/wwYHrAfKhwMUled2I/toC5d9YAGWY5M3cVe9B6vq/Lnk772effzm/SLe/selz8wC+18qDcP9ZzaFeQy+yoy5wBlDZZSlWgoy8h9t/5jdWjm/CE0752lABv6bBPxioKNCtHNRKdBb/B3HHhqJJTXMuisgRGe7sIBWQgALuVcn0tTsbruu610yo1ZVAUmMIslqTaKEtQpUGy1Ct1gbUW5CyukGHKJcodZjXAiC0WoSk2U/IWm2jhXYKVbq9QrXWwFDvKCJbNpiOSvp6lGZHtMSic6xcmIZgW4+CYXWdxGNtxmlpwGgTH8pR9Lm9+ew2GcRTzIidiMn4kYBlbOqYDE4jTTMxzKZCi6NoxdGRVfR4yqpIihabOgTtYGTmCFlCRc6hSgsmg+C1PhIsfL6OiI5pZriBUOVtI+yQ3DnycfN2QLdVRifCrbwSc0KUFHdEgMowkw4lAwfRrJQJhasHKcjCkaiKAQlLkQc1K+uqii6v0d9vG9Qz982RIkdRc1fIhmyIbqlUswAAAA==') format('woff2'), url('iconfont.woff?t=1597645001364') format('woff'), url('iconfont.ttf?t=1597645001364') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1597645001364#iconfont') format('svg'); /* iOS 4.1- */}
font-family:声明字体变量src:字体下载地址,可以是local和url两种,local就是加载本地字体,url就是加载远程服务器上的字体。每种浏览器对**@font-face**的兼容性是不一样的,从上面的代码也可以看出,它针对不同的浏览器做了不同的字体适配。
现在,我们把解压文件夹中的iconfont.css和iconfont.ttf
两个文件复制到本地项目中,我的目录结构是这样的
由于我的项目只是在Android和iOS中访问,所以删除了多余的url,为了避免引起其他CSS图标冲突,这里我对iconfont.css中的图标样式名也是稍微做了一些调整
@font-face {font-family: "iconfont";
src:url('../fonts/iconfont.ttf') format('truetype');, /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */}
.iconfont { font-family: "iconfont" !important; font-size: 0.39rem; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.icon-font-help:before { content: "\e603";}
.icon-font-warning:before { content: "\e836";}
.icon-font-eye:before { content: "\e601";}
.icon-font-Eye:before { content: "\e833";}
一切已准备就绪,现在我们就可以使用iconfont的图标了,首先需要引iconfont.css
使用icon样式
这是我从iconfont中引入的图标哟
来看看最终效果吧
我只是记录我的学习过程,由于书读得少,可能很多地方表述或者是理解得不对,请轻喷并指正。