浅析如何在小程序中实现图标图标？（微信小程序图标字体）

如何在小程序中实现图标icon？下面的文章将与您分享小程序图标的几种实现方案，希望对您有所帮助！

小程序原生提供的图标组件的属性类型的默认值必须表明typestring是图标的类型，有效值为success、success _ no _ circle、info、warn、waiting、cancel、download、search、clearsize number/string 23 No Icon size colorstring No Icon color，与css的颜色描述组件的size属性的长度单位相同默认为px，从2.4.0开始支持传入单位（rpx/PX）PX值类型，默认使用，没有

RPX（响应像素）屏幕自适应单元，它将屏幕分成750个单元，每个单元是1/750。【相关学习推荐:小程序开发教程】

例如iphone6的屏幕宽度为350px，每个rpx为0.5px .也就是说，如果我们在iphone6机器上将size的值设置为60rpx，则与设置为30或30px具有相同的效果。

组件颜色属性是改变图标所有像素的颜色。常见问题:图标和文本可以放在同一行吗？是的，图标本身就是为了更好的布局和更方便的使用而诞生的。代码如下:

我是一行文本，我包含图标！有时真机上的图标是空白的。首先，这个问题肯定不是因为字体文件链接没有添加小程序的安全域名。WXSS加载图片和字体以允许外来字段！如果图标是自定义的，则需要检查型号和嵌入的字体文件类型，这可能是由兼容性引起的。小程序推荐使用TTF和WOFF字体。如果使用这两种字体，这种情况仍然存在，您可以考虑将数据嵌入更改为SVG格式。

如何取出weui组件库中图标组件的图标并保存在本地？可以直接打开weui官网（https://weui.io/），然后通过浏览器开发者工具查看源代码，找到资源地址并下载。或者从微信官方文档下载（https://developers.weixin.qq.com/miniprogram/design/#% E5 % 9b % Be % E6 % A0 % 87）。

开箱即用的优势。

缺点仅支持success、success _ no _ circle、info、warn、waiting、cancel、download、search和clear，远远不能满足开发需求。

自定义图标直接使用图片的优点是简单粗暴，每个图标对应一张图片。

缺点图片不方便在文本中布局。不方便修改颜色。

图片不能放大或缩小，放大后会变得空洞和锯齿状。

图片需要存储在本地或网络上，这将导致大量的HTTP请求并减慢页面加载速度。

使用起来不如只有一个名字的图标方便。

使用Sprite，连续的图片集以不重叠和最小分布的方式排列成一幅图片。每次使用时，垂直和水平显示的初始坐标和面积大小用于实现动态切换的效果。

使用示例通过向导图实现爆炸效果。图片大小为（650x650）像素；；所以每个小图标的大小为（130 x130）px；；这就是css样式的宽度和高度设置为130px的原因，也是js代码移动步长设置为130的原因。js中的left和top都是负数，因为这不是显示图标的坐标，而是背景图像应该向左上方移动的距离。

注意:wxss中只能使用网络图片，不能使用本地图片！

代码如下:

/* icon.wxss */。sprite { display:block；宽度:130px高度:130px背景:URL（“https://I。loli。net/2021/11/15/7bh 5 gdkblynrfm 3。png“）NO-重复；}.scale { transform -origin:0 0 0；转换:scale（2，2）；}//icon . jspage（{/* * * page */data的初始数据:{ left:& # 39；0px & # 39，顶部:& # 39；0px & # 39，}，/* * *生命周期函数--监控页面加载*/onload:Function（）{ var that = this；var left = 0；var top = 0；const step = 130const stop =（650-130）；var I = setInterval（function（）{ if（left》= stop & & top》= stop）{ clearInterval（I）} else { left+= step；if（left》= 650）{ left = 0；top+= step；} that . setdata（{ left:& # 39；-'+left+& # 39；px & # 39，顶部:& # 39；-'+top+& # 39；px & # 39}）}，100）}）优点加载时，只加载一次。减少了HTTP请求。

使用CSS样式进行绘制。icon -关闭{ display:inline -block；宽度:17px高度:2px背景:红色；变换:旋转(45度)；}。icon -close::after { content:& # 39；'；显示:块；宽度:17px高度:2px背景:红色；变换:旋转（-90度）；缺点}每个图标都需要用CSS样式的代码编写，这需要大量的劳动。

这个图标不是字符，每个图标都要画一个中心点，否则使用时控制位置会比较麻烦。

大小和颜色都不好控制。所以这不是一个好的图标方案。

使用矢量字体（推荐）当浏览器渲染字符时，首先查看font -系列样式以确定要使用的字体名称。然后用该字符的Unicode在字体文件中查找相应的字符信息。

字体有两种类型，一种是点阵字体，另一种是矢量字体。矢量字体是现在使用最广泛的字体。矢量字体大致可以分为三类:Adobe主导的Type1、苹果和微软主导的TrueType以及Adobe、苹果和微软共同主导的开源字体OpenType。

在矢量字体中，每个Unicode只是每个字符的索引，每个字符描述信息是一个几何矢量绘图描述信息。以Type1为例，它使用三次贝塞尔曲线绘制字形。TrueType使用二次贝塞尔曲线来描述字形。因为矢量字体是绘制的，所以可以实时填充任何颜色，并且可以无限缩放而没有锯齿。

阿里巴巴的图标网站（https://iconfont.cn/），我们可以在那里搜索任何要在线编辑的图片，并下载用于小程序的样式文件。

字体源描述:

EOT是微软IE浏览器专用的OpenType字体类型。

TTF是一种TrueType字体。

WOFF和WOFF2是用于移动开发的特殊矢量字体格式。它是三种矢量字体格式的重新打包。

链接各种字体文件源可以与不同的浏览器托管环境兼容。浏览器将选择它支持的格式，并尝试从列表中的第一个格式加载。一旦有可用的字体格式，其余的字体格式将不会被加载。建议在小程序中使用TTF和WOFF。WOFF2在较低版本的IOS设备上将出现不兼容问题。

用例子来参考这篇文章https://www.jianshu.com/p/25db60f77531.

使用SVG矢量文件许多绘图软件可以导出SVG格式的矢量文件，例如草图，但其导出的SVG格式的矢量文件具有无用的垃圾信息。你可以在阿里巴巴的图标网站上编辑后下载SVG格式的矢量文件，该文件不包含任何垃圾信息。然后我们获取这个文件并找到一个Image2base64工具来将文件内容转换为base64字符串。然后你可以使用这个base64字符串作为小程序中的图像源来实现自定义图标。

例1。准备SVG图片

2.使用在线图像2base64将图片转换为:

数据:image/SVG+XML；base64，PD 94 bwwgdmvyc 2 lvbj 0 IMS 4 iibzdgfuzgsb 25 lpsjubyi/pjwhr 9 dvflqrsbzdmcgufvcteldicitly 9 XM 0 VL 0 rurcbtvcgms 4x ly 9 fti gimh 0 DHA 6 ly 93d 3 cudzmub 3 jnl 0 dyyxboawnzl 1 wry 8 xljevrfrel 3 N2 zzexlmr0zci+phn2 zyb 0 psixnjm 2 OTC Wnt k4 njayiibjbgfzc 0 iawnvbiigdml

。SVG -icon { display:block；宽度:200px高度:200pxbackground -重复:NO-重复；背景:URL（“data:image/SVG+XML；base64，PD 94 bwwgdmvyc 2 lvbj 0 IMS 4 iibzdgfuzgsb 25 lpsjubyi/pjwhr 9 dvflqrsbzdmcgufvcteldicitly 9 XM 0 VL 0 rurcbtvcgms 4x ly 9 fti gimh 0 DHA 6 ly 93d 3 cudzmub 3 jnl 0 dyyxboawnzl 1 wry 8 xljevrfrel 3 N2 zzexlmr0zci+phn2 zyb 0 psixnjm 2 OTC Wnt k4 njayiibjbgfzc 0 iawnvbiigdml它表明该方法仍然需要一张图片进行一次处理，然后在页面中引用。注意:样式文件中的宽度和高度属性的值需要与下载的svg文件的宽度和高度一致（可以在SVG标签中看到）。

使用Canvas绘制SVG对于动画来说是可以的，但是对于图标来说有点大材小用了。

更多编程相关知识请访问:编程入门！！

以上是小程序中如何实现图标Icon的简要分析。更多详情请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：浅析如何在小程序中实现图标图标？（微信小程序图标字体） https://zhujicankao.com/106016.html