200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 微信小程序中使用iconfont(阿里矢量图标字体)

微信小程序中使用iconfont(阿里矢量图标字体)

时间:2024-04-10 23:49:02

相关推荐

微信小程序中使用iconfont(阿里矢量图标字体)

在微信小程序中使用 iconfont 主要有两种方式,第一种是使用 Font class 方式,第二种是使用 Unicode 方式。

方式一:Font class 方式

1. 在/ 选择你想要的图标,选择 Font class 类型并下载到本地。

2. 解压下载到本地的压缩包,将里面的 iconfont.css 文件复制到你的项目中,并将后缀名改为 .wxss(因为小程序只支持 .wxss 样式)。

3. 把 iconfont.wxss 里面没用的代码去掉(不去掉也能用,小程序上传有代码包限制2M,所以最好去掉,你想偷懒也是可以的)

上图是下载下来的源文件,把红色方框内的内容精简到下图所示

4. 在 app.wxss 里全局引入 iconfont.wxss

@import 'styles/iconfont.wxss';

5. 在 WXML 里使用 iconfont 字体图标

<text class="iconfont icon-jiazai">字体图标</text>

提示:后续继续添加图标,只拷贝新图标的 .icon-xxx:before 到 iconfont.wxss 里是不会显示新图标的,因为 @font-face 里的 src 内容也发生了更改。还是要重复上述步骤。

方式二:Unicode 方式

下载 iconfont 的时候要选 Unicode,然后点击“查看在线链接”复制里面的代码。

把解压完的 iconfont.css 里 @font-face 里面的内容替换成刚才复制的代码。

然后跟方式一一样的步骤引用就行了。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。