01-微信小程序中使用iconfont

2019-02-27 本文已影响0人欢乐毅城

方式一：

（ $\color{red}{将ttf文件转换成base64}$ ）------ transfonter.org官网

步骤：

（1）iconfont官网下载字体图标代码：

1.png

（2）解压文件，并将 $\color{red}{iconfont.ttf}$ 文件转化为 $\color{red}{base64}$ ：跳转到https://transfonter.org
2.1选择上存iconfont.ttf文件：

02.png

03.png

（3）在小程序里的静态资源文件夹里( $\color{red}{lib}$ )新建一个叫 $\color{blue}{iconfont.wxss }$ 样式文件，将上面解压出来的 $\color{red}{stylesheet.css}$ 里面的内容全部拷贝到 iconfont.wxss 中，另外，还记得我们上面说的 $\color{red}{iconfont.css }$ 吗？这时候就要派上用场了，我们打开 iconfont.css 这个样式文件，将下面的样式，也就是我用红框标注的内容复制到 iconfont.wxss 文件里， $\color{red}{注意 }$ 上面(@font-face里面)的 $\color{red}{不 }$ 需要复制！！