• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

保存即可导入想要的图标

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序时间,日期的处理----插件发布时间:2022-07-18
下一篇:
微信小程序下拉框实现发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap