飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • UEditor使用文档
  • AngularJS教程
  • ThinkPHP5.0教程

微信小程序,制作属于自己的Icon图标-

时间:2022-05-19  作者:cool-net  

前言

最近在接手一个微信小程序,发现里面的图标都是使用的image组件,看起来非常别扭,加载也不太顺畅。

就想着看看微信有没有类似自带的图标库可以使用。

有是有,就是太少了,翻来翻去好像也就 8 种,不太够用啊。

image

官方没有就只能自己做了,还是阿里的iconfont好使,首先你得有iconfont的账号。

1、将你心仪的图标加入购物车

image

2、将图标添加至项目

点击右上角倒数第三个图标进入购物车,然后将购物车添加到我们的项目中,没有项目可以自行创建。

image

3、我的项目

进入到我的项目可以看到我们刚刚加入的图标,我的项目在最上方的资源管理 — 我的项目。

image

4、将项目下载至本地

解压后你会看到如下文件

image

5、将字体转换为base64

进入网站:https://域名/ ,找到文件中的 域名 字体文件,将字体文件转换为 base64。

记得开启第2步的 Base64 encode

image

下载并解压后你将会获得如下的文件

image

6、样式文件修改

同时打开第 4 步下载解压的 域名文件和第 5 步,下载解压的域名文件。

我们先看域名文件,红圈中的代码直接删除

image

再打开域名文件,将红圈中的代码复制到域名文件中去

image

7、重命名

域名重命名为 域名,并放到微信小程序项目中去,注意:后缀必须是wxss

image

8、导入样式文件并使用

域名中导入我们的 域名,我们生成的 icon 图标就可以在项目中使用了。

image

<view class="iconfont icon-bianji"></view>

image

至此,我们自定义的Icon图标就制作完成了

湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。