小程序中引入iconfont字体图标

1、首先打开阿里巴巴字体图标库:https://iconfont.cn,输入需要查找的字体图标,比如现在需要一个购物车的图标,那么你可以输入gouwuche,也可以输入cart,都可以找到想要的购物车图标。

在这里插入图片描述

2、在搜索到的图标中选择自己需要的,点击图标上的购物车按钮,即可加入到自己的购物车中。

在这里插入图片描述

3、点击网页头部右侧的购物车图标按钮,打开如下图所示界面,如果现在需要的图标是针对整个项目而言,那么就点击“添加至项目”这个按钮。第一次创建的话,可以选择创建新项目按钮,输入项目名称,点击确定。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4、我们可以在项目中以类的形式使用这些图标,所以选择中间那个Font Class,并选择“查看在线链接”。

在这里插入图片描述

5、出现下面这个链接,把这个链接输入到浏览器地址栏中打开,然后把代码全部复制粘贴。
在这里插入图片描述
在这里插入图片描述

6、在小程序项目中与pages同级目录下创建styles文件夹,并新建iconfont.wxss文件,将上面复制的代码粘贴到这个文件中。

在这里插入图片描述

7、在公共样式app.wxss文件中引入字体图标样式css文件:

在这里插入图片描述

8、在页面中使用字体图标方式如下:
在这里插入图片描述

最终效果图:

在这里插入图片描述

本文转载自(https://www.cnblogs.com/chenyn/p/13027406.html)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值