如何使用iconfont

使用iconfont

我们经常会用到图标，阿里巴巴矢量图标库（https://www.iconfont.cn/）很好用。下面介绍下iconfont在小程序开发中的应用。

1. 将目标图标加入购物车，并将购物车中的图标添加至项目。
   
2. 资源管理>我的项目，到达目标项目，默认Font class，点击“暂无代码，点击生成”，生成在线链接。

图标的使用方式有三种：Unicode引用、Fontclass引用和Symbol引用，默认采用Fontclass。这种方式使用class来定义图标，因此当需要替换图标时，只需要修改class。

3. 想在微信小程序中应用以上图标，在浏览器中打开上述在线链接，并另存为iconfont.wxss。
4. 将iconfont.wxss添加至小程序项目根目录下的static/iconfont文件夹下，即/static/iconfont/iconfont.wxss，并在主体样式文件（比如，app.wxss）中引入iconfont.wxss。

/* app.wxss */
@import "/static/iconfont/iconfont.wxss";

5. 在页面结构文件（比如，index.wxml）中通过类名应用图标。

<!-- index.wxml -->
<text class="iconfont icon-camera"></text>

小程序项目

代码涉及的主要文件有：

1. app.json
2. app.wxss
3. pages/index/index.wxml
4. pages/index/index.wxss

app.json

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "navigationBarBackgroundColor": "#1c424d",
    "navigationBarTitleText": "AITO",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

app.wxss

@import "/static/iconfont/iconfont.wxss";

pages/index/index.wxml

<view class="indexContainer">
  <view class="navContainer">
    <view class="navItem">
      <text class="iconfont icon-camera"></text>
      <text>相机</text>
    </view>
    <view class="navItem">
      <text class="iconfont icon-keyboard-26"></text>
      <text>按键</text>
    </view>
    <view class="navItem">
      <text class="iconfont icon-operation"></text>
      <text>操作</text>
    </view>
    <view class="navItem">
      <text class="iconfont icon-electronics"></text>
      <text>计算机</text>
    </view>
    <view class="navItem">
      <text class="iconfont icon-edit"></text>
      <text>编辑</text>
    </view>
  </view>
</view>

pages/index/index.wxss

.navContainer{
  display: flex;
}
.navItem{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}
.navItem .iconfont{
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #1c424d;
  border-radius: 50%;
  color: #fff;
  margin: 20rpx 0 10rpx;
  font-size: 48rpx;
}
.navItem text{
  font-size: 28rpx;
}