欢迎光临
我们一直在努力

怎么在微信小程序中使用自定义图标

这篇文章主要介绍“怎么在微信小程序中使用自定义图标”,在日常操作中,相信很多人在怎么在微信小程序中使用自定义图标问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么在微信小程序中使用自定义图标”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

在wxss文件中引用字体

<style type="less">
@font-face {
  font-family: 'iconfont';
  src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype'),
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-fanhui:before { content: "\f0343"; }
.icon-gengduo:before { content: "\f0344"; }
</style>

3,使用字体

<view class="iconfont icon-fanhui">
      返回
</view>
<view class="iconfont icon-gengduo">
      更多
</view>

4,效果图

到此,关于“怎么在微信小程序中使用自定义图标”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注云搜网网站,小编会继续努力为大家带来更多实用的文章!

赞(0)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。