微信小程序——导入图标（2）

在学习了上一篇导入阿里巴巴矢量图库的图标方法后https://www.cnblogs.com/en1302coling/p/11439590.html

这里还有一种导入方法

首先，把想要的图标添加入项目，点击Unicode显示代码，并点击复制代码

将复制的代码黏贴到app.wxss，并修改iconfont的样式，并将每个icon的名字赋予相应的代码编号，如下图所示：

 

 例子：

在微信开发工具，*.wxml中写入想要的代码

<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">我的收藏</text>
      <view class="divline1"></view>
    </view>
  </view>

在*.wxss中设置样式

.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;
}

 打开app.wxss,将复制的相关代码黏贴并赋值

@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';}

保存即可导入想要的图标