Small micro-channel programs - introducing icon (2)

After learning method on an icon to import Alibaba Vector Gallery of https://www.cnblogs.com/en1302coling/p/11439590.html

Here there is a method for introducing

First, I want to add icons into the project, click Unicode display the code, copy the code and click

Copy code to paste app.wxss, and modify iconfont style, and assigns code numbers corresponding to the name of each icon, as shown below:

 

 example:

In the micro-channel development tools, *. Wxml written in the code you want

<view class="item3">
    <view class="itemClass">
      <icon class="iconfont icon-localmusic"></icon>
      <text class="text">本地音乐</text>
      <view class="divline1"></view>
    </view>
    <view class="itemClass">
      <icon class="iconfont icon-zuijinbofang"></icon>
      <text class="text">最近播放</text>
      <view class="divline1"></view>
    </view>
    <view class="itemClass">
      <icon class="iconfont icon-download"></icon>
      <text class="text">下载管理</text>
      <view class="divline1"></view>
    </view>
    <view class="itemClass">
      <icon class="iconfont icon-radio"></icon>
      <text class="text">我的电台</text>
      <view class="divline1"></view>
    </view>
    <view class="itemClass">
      <icon class="iconfont icon-collect"></icon>
      <text class="text"> Favorites </ text > 
      < View class = "divline1" > </ View > 
    </ View > 
  </ View >

* .Wxss set in style

.item3{
  background: #ffffff;
}
.itemClass{
  height: 80rpx;
}
.text{
  font-size: 15px;
  margin-left: 50rpx;
}
.divline1{
  background: rgba(238, 236, 236, 0.781);
  width: 90%;
  height: 0.1rpx;
  margin-left: 100rpx;
  margin-top: 20rpx;
}

 Open app.wxss, copy and paste the relevant code assignment

@font-face {
  font-family: 'iconfont';  /* project id 1359989 */
  src: url('//at.alicdn.com/t/font_1359989_5h4uou7la6m.eot');
  src: url('//at.alicdn.com/t/font_1359989_5h4uou7la6m.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1359989_5h4uou7la6m.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1359989_5h4uou7la6m.woff') format('woff'),
  url('//at.alicdn.com/t/font_1359989_5h4uou7la6m.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1359989_5h4uou7la6m.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  margin-left: 20rpx;
  font-size: 20px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-localmusic:before{content: '\e6b4';}
.icon-zuijinbofang:before{content: '\e605';}
.icon-download:before{content: '\e67d';}
.icon-radio:before{content: '\e608';}
.icon-collect:before{content: '\e61e';}
.icon-heart:before{content: '\e632';}

Save the icon you want to import