详细介绍将iconfont图标以代码的方式引入微信小程序项目中

一、打开iconfont网址

iconfont首页图片

二、选择一个图片添加入库

添加入库图片

我们可以在这里选择多个icon图片添加入库,然后生成同一个项目的icon图标。

三、将选择的icon添加入项目

3.1、点击右上角的图标

点击右上角菜单图片

3.2、添加至项目

添加至项目图片

此处按提示完成添加至项目。

四、编辑图标(可省略此步骤)

自定义图标名称规范

自定义图标名称规范

4.1、编辑图标名称

编辑图标名称并保存的图片

五、编辑项目(可选)

自定义项目图标名称规范

5.1、点击“更多操作”菜单按钮

点击选择更多操作菜单图片

5.2、选择“编辑项目”

选择编辑项目图片

5.3、设置图标统一前缀名称等

设置项目图片

点击“保存”按钮完成设置。

5.4、完成设置

图标名称组成说明

六、将icon资源下载到本地使用

点击下载至本地的图片

七、如何在小程序项目中使用下载的文件

7.1、找到我们想要的css样式文件

找到我们要使用的css文件

7.2、如何使用样式文件

方法一、修改iconfont.css文件后缀名为iconfont.wxss文件,并将文件复制到小程序项目,通过@import的方式引入到指定的wxss样式文件中;

样式引用图片

方法二、直接将iconfont.css文件用文本编辑器打开,复制样式代码到指定wxss文件中使用。

7.3、在wxml文件中使用样式

可以通过<icon>或者<view>标签来使用icon文本图标

在wxml中使用样式的图片

7.4、删除下载的冗余的样式代码

删除冗余的样式代码的图片

猜你喜欢

转载自blog.csdn.net/yann02/article/details/105900359