IT技术之家

首页 > 小程序

小程序

微信小程序引入下载至本地的iconfont图标_小杨不香菜_小程序icon下载

发布时间:2022-10-24 16:46:28 小程序 0次 标签:微信小程序 小程序
第一步选好自己要用的icon图标并下载至本地下载后得到这样目录的文件第二步 转换成base64网址:https://transfonter.org/选择后缀为.ttf的文件第三步:下载成功后,得到一个名为 “transfonter.org” 开头的压缩包,解压后得到三个文件,打开其中 “stylesheet.css” 文件第四步:在小程序目录新建放置图标资源的文件这是我自己的一个目录,可以看到在iconfont.wxss中,如果是直接复制文件的话,记得把后缀css改成wxss把@font-fac...

在写小程序项目中遇到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中引入,就可以全局使用了。


最后测试显示效果: