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

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

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

猜你喜欢

转载自blog.csdn.net/showSoft/article/details/106288887