微信小程序开发笔记进阶篇④——基于iconfont快速实现icon图标显示-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序开发笔记进阶篇④——基于iconfont快速实现icon图标显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、iconfont素材网

进入iconfont素材网
挑选想要的素材，加入购物车
点击右上角购物车图标，将图标添加至项目

微信小程序开发笔记进阶篇④——基于iconfont快速实现icon图标显示

二、iconfont项目设置

项目设置，勾选base64
生成代码，下载至本地
有用的是iconfont.css

微信小程序开发笔记进阶篇④——基于iconfont快速实现icon图标显示

三、微信小程序项目配置

iconfont.wxss就是iconfont.cn网站下载的iconfont.css改下后缀即可
关键代码在于
- <text class="icon-alipay iconfont icon"></text>
- 其中icon-alipay在iconfont.css中.icon-fb:before { content: "\e65d";}对应
- 而"\e65d"对应在@font-face中的base64 data中

微信小程序开发笔记进阶篇④——基于iconfont快速实现icon图标显示

四、全部源码

icon.wxml

<view class="icon_lists demo__list">
  <view class="icon_card">
    <text class="icon-fb iconfont icon"></text>
    <view class="name">fb</view>
  </view>
  <view class="icon_card">
    <text class="icon-github iconfont icon"></text>
    <view class="name">github</view>
  </view>
  <view class="icon_card">
    <text class="icon-twitter iconfont icon"></text>
    <view class="name">twitter</view>
  </view>
  <view class="icon_card">
    <text class="icon-applets iconfont icon"></text>
    <view class="name">applets</view>
  </view>
  <view class="icon_card">
    <text class="icon-alipay iconfont icon"></text>
    <view class="name">alipay</view>
  </view>
  <view class="icon_card">
    <text class="icon-taobao iconfont icon"></text>
    <view class="name">taobao</view>
  </view>
</view>

icon.wxss

@import 'iconfont.wxss';

.icon_lists {
  /* width: 100% !important; */
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  margin: 20rpx;
}

.icon_card {
  /* flex: 0 0 25%; */
  width: 220rpx;
  text-align: center;
  margin-bottom: 30rpx;
}

.name {
  font-size: 30rpx;
  color: #999;
}

.icon {
  display: block;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 100rpx;
  margin: 10rpx;
  color: #333;
}

iconfont.wxss

@font-face {
  font-family: "iconfont"; /* Project id 3579669 */
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1660113936513') format('woff'),
       url('iconfont.ttf?t=1660113936513') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fb:before {
  content: "\e65d";
}

.icon-github:before {
  content: "\e65e";
}

.icon-twitter:before {
  content: "\e65f";
}

.icon-applets:before {
  content: "\e660";
}

.icon-alipay:before {
  content: "\e666";
}

.icon-taobao:before {
  content: "\e667";
}