微信小程序 - iconfont 图标字体

果子爸聊技术 2019-04-15 18:09:39 ⋅ 153 阅读

你还在使用图片作为小程序的图标?好像有点Outer了啵。

大猪告诉大家如何在小程序上使用iconfont字体图标。


使用指南

登录阿里巴巴iconfont.cn




新建一个项目



点击icon收藏、或者搜索



加入到项目中


下载


到项目下载到本地解压


生成代码


复制iconfont.css到xxx.wxss



替换iconfont.css中的@font-face为上面的生成代码





xxx.wxss样式中@import使用@import "../../../css/test.wxss";

wxml中使用

<text class='iconfont icon-home' style='color:#7F8389;font-size:60rpx;'></text>

显示结果如下


最后

每天发布更多新鲜有含量的技术文章、总有一款适合你。

快关注我、把我打包带走。

---------------END----------------

后续的内容同样精彩

长按关注“IT实战联盟”哦




全部评论: 0

    我有话说:

    程序实战篇:基于wxcharts.js绘制移动报表

    程序图表插件(wx-charts)是基于canvas绘制,体积巧,支持图表类型饼图、线图、柱状图 ......

    程序-Image的widthFix属性和rpm尺寸的使用

    在做程序的商品详情页,商品的详情是图片集合,渲染完成后发现图片加载的很不自然

    程序抖音实战-首页(上)

    你也可以用程序编写一个抖音

    程序实现商品数量加减

    这是一个用程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据并加载

    程序电商实战-首页(下)

    上一篇:程序电商实战-首页(上)好了,上一期我们把首页搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序电商实战-首页(上)

    上一篇:程序电商实战-入门篇 嗨,大家好!经过近两周的精心准备终于开始程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图

    程序电商实战-商品列表流式布局

    今天给大家分享一下程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序实战篇:如何解决https域名问题 ?

    开发自己的程序绕不开https问题,为了能在程序中调用我们自己的API服务请打开看一看吧!!!

    程序实战篇:商品属性联动选择(案例)

    本期的程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序商城(九):授权并实现个人中心页面页面

    实现商城的授权并获取用户信息和个人中心页面布局

    程序抖音实战-首页(下)

    抖音程序首页动态数据获取

    程序电商实战-入门篇

    程序开发工具有新版本更新啦!开发体验更好了,接下来一起为电商程序做一下准备前期准备工作~~

    程序电商实战-商品详情(上)

    先看一下今天要实现的程序商品详情页吧!

    程序电商实战-购物车(上)

    好久没更新程序电商实战的文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间的。在这几天将会有新版的 程序电商教程推出.......

    程序实战篇:程序之页面数据传递

    我们在写程序的时候经常会遇到子页面向主页面回传数据或者普通页面跳转到tabBar 页面携带数......

    程序:最新登录授权并获取openid等信息

    为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,程序游戏的体验版、开发版调用 wx.getUserInfo 接口,将

    程序营销之大转盘(二)

    第一个版本的大转盘都是用图片做的,奖品等信息都是不无法修改的,说白了就是没啥实际用途,作者我就直接用canvas撸了一个全手工绘制的大转盘分享给大家