微信小程序引入iconinfo教程

小程序的wxss文件相对于css文件一样的,差异只是文件格式差异。

进入iconfont官网(需注册账号)

新建项目


新建完项目之后,去搜索你所需要的图标,然后将所需要的加入到购物车

进入购物车

添加到前面所建的项目中


项目列表就展示所添加的图标

复制在线链接

选择unicode,下载到本地

解压出来有个iconfont.css文件


将后缀名改为wxss

顺便打开该文件,将如下@font-face模块 替换为上面复制在线链接的@font-face模块

然后将iconfont.wxss文件复制到项目中

使用的方法:

然后wxml中添加样式

class="iconfont icon-shanchu"

对应wxss样式文件引用iconfont.wxss文件

 @import "../../../utils/iconfont.wxss";(用的是相对路径,每个项目都存在差异,看具体放的位置)

.icon-shanchu {

  color: #ffffff;

  font-size: 26rpx;

}

就可以了。

下次只需往原来的项目中添加图标,然后下载到本地解压出来,将对应的所需要的图标样式复制到原来的iconfont.wxss中即可,在线链接也不需要替换了,因为都是在iconfont官网同个项目底下的。


本文来自py编程