首页 > 微信 > 详细

微信小程序——导入图标(2)

时间:2019-10-09 14:08:02      阅读:118      评论:0      收藏:0      [点我收藏+]

在学习了上一篇导入阿里巴巴矢量图库的图标方法后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‘;}

保存即可导入想要的图标

技术分享图片

 

微信小程序——导入图标(2)

原文:https://www.cnblogs.com/en1302coling/p/11640864.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!