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

ゝ一纸荒年。 2023-10-07 19:27 5阅读 0赞

#### 文章目录 ####

*  一、iconfont素材网
 *  二、iconfont项目设置
 *  三、微信小程序项目配置
 *  四、全部源码

## 一、iconfont素材网 ##

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

![在这里插入图片描述][aefa1475034f478d999a5e048817a4ab.png]

![在这里插入图片描述][5d550e02517c414b9536fa6bc485a345.png]

## 二、iconfont项目设置 ##

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

![在这里插入图片描述][985bf56789d4469cb3412966abf37531.png]  
![在这里插入图片描述][63c08fdf218749758a93b130e58c6ce2.png]  
![在这里插入图片描述][3ec21b84b51b47cfb65aca4e5ca38767.png]

## 三、微信小程序项目配置 ##

*  `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中

![在这里插入图片描述][46398baee2d54d16af2a71f15c949b16.png]

## 四、全部源码 ##

`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";
    }

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

[iconfont]: https://www.iconfont.cn/
[aefa1475034f478d999a5e048817a4ab.png]: https://img-blog.csdnimg.cn/aefa1475034f478d999a5e048817a4ab.png
[5d550e02517c414b9536fa6bc485a345.png]: https://img-blog.csdnimg.cn/5d550e02517c414b9536fa6bc485a345.png
[985bf56789d4469cb3412966abf37531.png]: https://img-blog.csdnimg.cn/985bf56789d4469cb3412966abf37531.png
[63c08fdf218749758a93b130e58c6ce2.png]: https://img-blog.csdnimg.cn/63c08fdf218749758a93b130e58c6ce2.png
[3ec21b84b51b47cfb65aca4e5ca38767.png]: https://img-blog.csdnimg.cn/3ec21b84b51b47cfb65aca4e5ca38767.png
[46398baee2d54d16af2a71f15c949b16.png]: https://img-blog.csdnimg.cn/46398baee2d54d16af2a71f15c949b16.png