在写小程序项目中遇到icon图标引入不起作用,原因是因为小程序必须先转为base64引入!
第一步
选好自己要用的icon图标并下载至本地
下载后得到这样目录的文件
第二步 转换成base64
网址:https://transfonter.org/
选择后缀为.ttf的文件
第三步:下载成功后,得到一个名为 “transfonter.org” 开头的压缩包,解压后得到三个文件,打开其中 “stylesheet.css” 文件
第四步:在小程序目录新建放置图标资源的文件
这是我自己的一个目录,可以看到在iconfont.wxss中,如果是直接复制文件的话,记得把后缀css改成wxss
把@font-face中的内容换成stylesheet.css的内容
还需要在wxss中添加这段代码:
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'iconfont' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: inherit;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
之后找到下载的本地icon图标文件夹里的iconfont.css文件,将里边的图标代码复制到wxss中,添加完之后整体代码如下:
第五步 在app.wxss中引入,就可以全局使用了。
最后测试显示效果: