关注前端 | 前端博客
当前位置: 微信小程序 > 微信小程序(引用iconfont字体图标)

微信小程序(引用iconfont字体图标)

2019-09-04 分类:微信小程序 作者:管理员 阅读(147)

第一步:下载需要的字体图标

进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,流程为:搜索“图标名称”--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮

点击下载代码,将得到名为download.zip的压缩包,解压将看到以下内容:

第二步:找到需要的文件引入到我们的微信小程序项目中

解压后找到 iconfont.css 文件,用编辑器打开 iconfont.css文件,src 只保留有base64的那个,其余都删除,然后在小程序项目你新建一个iconfont.wxss,复制全部内容到这个iconfont.wxss里

第三步:微信小程序项目中配置

假如我们把这个iconfont.wxss文件放到项目最外层的style文件夹里,我们就需要在全局样式中去引用,找到项目的app.wxss,用@import导入字体图标样式

1
@import 'style/iconfont.wxss';

第四步:微信小程序项目中使用

1
<text class='iconfont icon-xufeiguanli '></text>

字体图标也是可以想字体那样设置颜色大小的

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
0

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - 微信小程序(引用iconfont字体图标)

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线