百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

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

liuian 2025-01-20 14:45 44 浏览

前言

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

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

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

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

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

2、将图标添加至项目

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

3、我的项目

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

4、将项目下载至本地

解压后你会看到如下文件

5、将字体转换为base64

进入网站：https://transfonter.org/ ，找到文件中的 iconfont.ttf 字体文件，将字体文件转换为 base64。

记得开启第2步的 Base64 encode。

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

6、样式文件修改

同时打开第 4 步下载解压的 iconfont.css文件和第 5 步，下载解压的stylesheet.css文件。

我们先看confont.css文件，红圈中的代码直接删除

再打开stylesheet.css文件，将红圈中的代码复制到confont.css文件中去

7、重命名

给confont.css重命名为 xxx.wxss，并放到微信小程序项目中去，注意：后缀必须是wxss

8、导入样式文件并使用

在app.wxss中导入我们的 xxx.wxss，我们生成的 icon 图标就可以在项目中使用了。

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

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

作者：畅饮无绪

原文地址：https://www.cnblogs.com/cool-net/p/16107773.html

相关推荐

xp永久激活工具（xp永久激活码）

如果你需要重置XP的激活器，你需要先打开“开始”菜单，然后选择“运行”。在运行对话框中，输入“regedit”，然后按回车键。这会打开注册表编辑器。在编辑器中，使用左侧面板来导航到“HKEY_LOCA...

cad2008激活序列号（激活cad的序列号）

1.首先运行“AutoCAD2008安装包”中的“Setup.exe”安装AutoCAD2008，安装过程需要十分钟左右；2.第一次运行AutoCAD2008时，请在注册界面输入序列号666-9...

自己可以重装电脑系统么（可以自己重装系统吗）

电脑自身也可以重装系统。1.电脑是一个可编程的设备，通过特定的步骤和操作，用户可以自行进行系统重装。2.重装系统的过程包括备份重要数据、获取系统安装介质、重新启动电脑进入安装界面、按照指引选择系统...

win11免费下载（win11正式版下载）
  • win11免费下载（win11正式版下载）
  • win11免费下载（win11正式版下载）
  • win11免费下载（win11正式版下载）
  • win11免费下载（win11正式版下载）
qq邮箱在哪里找账号（qq邮箱账号在qq里怎么找）
  • qq邮箱在哪里找账号（qq邮箱账号在qq里怎么找）
  • qq邮箱在哪里找账号（qq邮箱账号在qq里怎么找）
  • qq邮箱在哪里找账号（qq邮箱账号在qq里怎么找）
  • qq邮箱在哪里找账号（qq邮箱账号在qq里怎么找）
苹果处理器性能排行（苹果处理器性能排行榜平板）

1、截止至最新的iPhoneXS上搭载的A12，从iPhone4首次搭载A4处理器开始，目前已经有9代的苹果A系列处理器；2、A4是一颗45nm制程的ARMCortex－A8的单核心处理器，GP...

苹果手机怎么录屏（苹果手机怎么录屏在哪里打开）

iPhone手机的屏幕录制功能需要在设置里面进行添加，添加成功之后，就可以使用录屏功能了。点击控制中心进入iPhone手机的设置，来到设置之后，找到控制中心选项并点击。点击加号添加录屏功能来到控制中心...

电脑怎么打开系统还原（电脑怎么开启系统还原的功能）

右键此电脑，属性，系统保护，配置，勾选启用系统保护，确定，创建，输入还原点描述，点击创建，系统提示已成功创建还原点，点击关闭，当需要还原的时候，点击上面的系统还原，选择需要还原的节点，点击完成，即可开...

ghost系统下载xp（非ghostxp下载）

蒲公英系统网站能下载。下载后缀为gho的xp系统，使用体验非常棒效果非常好。以上信息根据美国华盛顿操作系统邮报最新消息显示。不能装钉钉的。在WindowsXP系统上是不能安装钉钉来上网课的。要使用钉...

电脑安全模式怎么用（电脑安全模式怎么按出来）

1.进入运行输入指令确定键盘上按下win+r组合键，打开运行，输入msconfig，点击确定。2.进引导系统选安全引导进入页面后，点击引导，选中系统，勾选安全引导，点击确定。3.重启进入安全模式弹出...

win10可选更新（win10可选更新和必要更新）

首先确保系统是激活状态。如果不是，可以用小马激活或KMS激活软件等工具激活。1.打开开始菜单，选择“设置”，选择“更新和安全”，设置自动检测安装更新，接受win10推送。电脑接受win10推送后...

讯飞语音输入法（讯飞语音输入法电脑版）

手机中讯飞语音输入法操作起来非常的简便。我们可以先打开讯飞语音。输入法在输入法键盘上的上端有一个麦克风的标识，我们只要点开麦克风的标识，就可以说话了，上面就会出现相应的文字了。文字可以自动帮我们识别修...

电脑品牌型号在哪里看（电脑选什么牌子的好）

查看自己电脑品牌型号和具体配置的具体方法：1.右键点击桌面上的“这台电脑”图标，弹出的菜单中选择“属性”。2.在此界面即可看到你的电脑的CPU品牌(AMD)、型号(A6-5200)、频率(2.0GHz...

网卡驱动装不上怎么回事（网卡驱动装不了怎么办）

可能原因如下1、这种情况是因为系统中没有集成电脑网卡所对应的驱动程序。2、这种情况可以利用鲁大师查询网卡的具体型号，然后去官网或者网络上下载对应的驱动重新安装就可以正常上网了。可能原因如下：1，估计是...

手机输入法怎么打繁体字（手机怎样输入繁体）

步骤如下：1.在手机设置页面找到输入法设置，如果能搜索，会帮助找到输入法设置页面。2.在系统的输入法设置页面，找到输入法自身的设置页面入口。3.在输入法自设难度设置页面，找到简繁切换的设置页面。4.勾...

一周热门
最近发表
标签列表