微信小程序中使用iconfont图标

时间：2020-02-20 16:47:09 阅读：75 评论：0 收藏：0 [点我收藏+]

1、在阿里巴巴的iconfont网站，创建自己的项目

技术分享图片

2、依次挑选图标到购物车

技术分享图片

3、图标挑选完毕后，将购物车的图标添加到所属项目中

技术分享图片

4、进入我的项目，默认是不生成代码的，需要在红框处点击生成，然后根据下面的路径跳转，拷贝生成好的css样式文件

技术分享图片

5、将生成的css样式文件，复制到项目中，比如是 style/iconfont/inconfont.wxss

技术分享图片

6、在app.wxss中引用这个css文件，这样以后所有页面只需要应用就可以了

@import "style/iconfont/iconfont.wxss"

7、页面具体使用：（iconfont是外部样式表文件名后面的iconcloud可在iconfont项目对应的图标上点击复制即可）

<view class="middle-item-top">
<text>2月20日明天</text>
<text class="iconfont iconcloud"></text>
<text>10℃ / 1℃</text>
</view>

技术分享图片

备注：iconfont也提供其他方式的图片导入

技术分享图片

原文：https://www.cnblogs.com/yhnet/p/12335680.html

踩

(0)

评论一句话评论（0）

分享档案

更多>