微信小程序中引入iconfont图标

1、登录到阿里巴巴矢量图标库,新建一个项目,把自己需要用到的图标放进新建的项目中。
2、找好完以后,进入到项目,点击下载到本地。然后解压download文件。解压出来把后缀名为.ttf的文件拿出来
3、网站登录https://transfonter.org/,进去后点击增加了addFont按钮。将刚才提取出来的.ttf的格式放进去
https://transfonter.org/网站
4、把base64这个打开。然后点击convert,成功后将转换好的文件下载到本地。、里面有个stylesheet文件。
image.png
image.png
image.png
5、在小程序项目的根目录下新建个iconfont.wxss文件,然后将stylesheet。css里面的代码复制到项目里的iconfont.wxss。
image.png
6、在每个.wxss里文件里引入,代码如下:

(1)在 .wxml为后缀的文件中

<view class="icons icon_like"></view>

(2)在.wxss为后缀的文件中

@import "../../iconfont.wxss" //导入iconfont的样式
.icon_like{
  content:"\e687";  //在矢量图标中的命名
  font-size: 14px;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容