微信小程序引入外部矢量图标（阿里巴巴矢量图标）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序引入外部矢量图标（阿里巴巴矢量图标）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.显示效果

微信小程序引入第三方图标,微信小程序,小程序

文章来源地址https://www.toymoban.com/news/detail-562683.html

2.实现步骤

进入阿里巴巴矢量图标库

搜索想要的矢量图标并加入购物车，点击右上角购物车

微信小程序引入第三方图标,微信小程序,小程序

将图标添加至项目

微信小程序引入第三方图标,微信小程序,小程序

更改项目设置

微信小程序引入第三方图标,微信小程序,小程序

将字体格式设置为TTF Base64

微信小程序引入第三方图标,微信小程序,小程序

点击下载至本地

微信小程序引入第三方图标,微信小程序,小程序

在微信小程序中新建文件夹

微信小程序引入第三方图标,微信小程序,小程序

将下载到本地的文件中的iconfont.css拖拽到微信小程序新建的文件夹中

微信小程序引入第三方图标,微信小程序,小程序

更改后缀名为wxss

微信小程序引入第三方图标,微信小程序,小程序

将矢量图复制到class中

微信小程序引入第三方图标,微信小程序,小程序

使用图标：

在app.wxss中引入文件

微信小程序引入第三方图标,微信小程序,小程序

<view>
  <text class="iconfont icon-kafei"></text>
  <text class="iconfont icon-yaopin"></text>
  <text class="iconfont icon-yinle"></text>
  <text class="iconfont icon-lvxing red"></text>
  <text class="iconfont icon-wangyou red"></text>
  <text class="iconfont icon-dianpu red"></text>
  <text class="iconfont icon-tupian blue"></text>
  <text class="iconfont icon-kouhong blue"></text>
  <text class="iconfont icon-qiandai blue"></text>
</view>

/* pages/iconfont/iconfont.wxss */
view{
  display: flex;
  flex-wrap: wrap;
}
.iconfont{
  font-size: 200rpx;
  line-height: 250rpx;
  padding: 20rpx 16rpx;
}
.red{
  color: red;
}
.blue{
  color: blue;
}

到了这里，关于微信小程序引入外部矢量图标（阿里巴巴矢量图标）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！