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

一、iconfont素材网

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

二、iconfont项目设置

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

三、微信小程序项目配置

• 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中

四、全部源码

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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;
}
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

觉得好，就一键三连呗（点赞+收藏+关注）