微信小程序 使用字体图标 iconfont 本文介绍使用阿里图标库的字体图标

   日期:2020-05-24     浏览:131    评论:0    
核心提示:很多编写微信小程序的朋友开发微信小程序的时候想使用字体图标,阿里图标库资源很多感觉是很棒的,有点给阿里打广告的意思了,哈哈,话不多说介绍怎么样使用吧.首先去阿里图标库.图标库网址:https://www.iconfont.cn/点击这里加入,然后点上角的购物车样的图标,然后可以加入项目,也可以直接下载代码,下载完以后解压后可以看到里面有一个iconfont.css文件,打开这个文件把红字圈的地方去掉:然后把他复制到小程序的wxss文件内下面这个图是加载入到微信小程内的WXS.

很多编写微信小程序的朋友开发微信小程序的时候想使用字体图标,阿里图标库资源很多感觉是很棒的,有点给阿里打广告的意思了,哈哈,话不多说介绍怎么样使用吧.首先去阿里图标库.图标库网址:https://www.iconfont.cn/

点击这里加入,然后点上角的购物车样的图标,然后可以加入项目,也可以直接下载代码,下载完以后解压后可以看到里面有一个iconfont.css文件,打开这个文件

 

把红字圈的地方去掉:然后把他复制到小程序的wxss文件内

下面这个图是加载入到微信小程内的WXSS内的。

下面是我使用的样式

Page({

  
  data: {
    language: [
      ["红包", "iconjikediancanicon18"],
      ["商家代金卷", "iconpingjia"],
      ["津贴", "iconkefu"],
      ["我的地址", "iconguanzhu"],
      ["我的关注", "iconB-hongbao"],
      ["我的评价", "iconwodedizhi"],
      ["客服中心", "icon44jintieshenqing"]
    ]
  },

 

<view class='containerlist'>
	<block wx:for="{{language}}" wx:key="index">
		<view class="list">
			<view class="left">
				<view class="iconfont32  {{item[1]}}"></view>
				<view>{{item[0]}}</view>
			</view>
			<view class="right">
				<label decode="{{true}}" class="iconfont icongengduo"></label>
			</view>
		</view>
	</block>
</view>

本人承接微信小程序制作,微信公众号二次开发

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
更多>相关资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服