微信小程序引入iconfont

  • Post author:
  • Post category:小程序


微信小程序如何引用阿里iconfont图标库?

1、进入阿里iconfont官网 https://www.iconfont.cn/;新建一个自己的项目,导入自己需要的icon。

在这里插入图片描述

2、将项目里的icon库下载至本地、解压。

解压后的文件列表

3、打开https://transfonter.org/,来转换 ttf 。

点击Add fonts,上传iconfont.ttf。

在这里插入图片描述

4、勾选上 Family support , Base64 encode, TTF 三个选项, 点击 “Convert” 进行转化, 然后 “Download”。

5、解压后的目录:

在这里插入图片描述

6、将

stylesheet.css

的内容拷贝至小程序的

app.wxss

中,将之前在iconfont下载的文件夹打开,找到

iconfont.css

,将其中的

.iconfont {...}

和带

:before

的所有伪类CSS代码拷贝至小程序的

app.wxss

。完成后的

app.wxss

内容如下:

@font-face {
    font-family: 'iconfont';
    src: url('data:application/font-woff2;charset=utf-8;base64,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') format('woff2'),
        url('data:application/font-woff;charset=utf-8;base64,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') format('woff'),
        url('iconfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconziliao:before {
  content: "\e608";
}

.iconziyuan:before {
  content: "\e7cb";
}

.iconshucai:before {
  content: "\e617";
}

.iconshuiguo:before {
  content: "\e618";
}

7、大功告成,可以使用iconfont了:

<text class="iconfont iconshuiguo"></text>

效果如下:

在这里插入图片描述

任何时候都不要放弃成为更好的自己!加油·小汪!



版权声明:本文为qq_39920109原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。