微信小程序系统学习之图标Icon
微信小程序中图标的学习要点如下：图标的作用：图标在微信小程序中主要用于视觉表达和交互引导，是提升用户体验和交互设计的关键元素。图标的类型及取值：type属性：提供了多种选择，如info、warn、以及颜**分的普通警告。info_circle：适用于表单中的状态标识，提示用户有信息需要注意。
微信小程序中，图标（Icon）这一元素至关重要，它主要用于视觉表达和交互引导。基础应用中，创建图标的核心代码是相当直观的。首先，让我们来看看不同类型的图标取值： type属性提供了多种选择：info： 通常用于显示信息提示，或者在操作前提示用户需要提供的必要信息。
在微信小程序中使用自定义 icon 图标，有以下六种方法：使用 icon 图标：直接将自定义图标作为图片资源引入，通过 image 标签使用。使用 Sprite：将多个图标整合到一张图片中，通过 CSS 背景定位和大小裁剪来显示不同的图标。
需将SVG代码转换为Base64编码格式。常用转换地址为：codepen.io/jakob-e/pen/...。完成转换后，即可在小程序中使用。在小程序代码中引用SVG，与常规CSS引用SVG方法相似。具体代码实现如下：至此，通过SVG与Base64编码的结合，成功在微信小程序中实现美观、灵活的图标显示。
微信小程序引入阿里巴巴矢量图标库iconfont的步骤如下：选择图标：从阿里巴巴矢量图标库官网选择所需的图标，点击“购物车”图标进行添加。添加至项目：确认图标选择无误后，点击“添加至项目”，将所选图标库添加到您的微信小程序项目中。
微信小程序引入外部icon(阿里巴巴矢量图标)的全过程
微信小程序引入阿里巴巴矢量图标库iconfont的步骤如下：选择图标：从阿里巴巴矢量图标库官网选择所需的图标，点击“购物车”图标进行添加。添加至项目：确认图标选择无误后，点击“添加至项目”，将所选图标库添加到您的微信小程序项目中。
首先，从官网iconfont-阿里巴巴矢量图标库选择所需的图标，点击“购物车”进行添加。 确认图标选择后，点击“添加至项目”，将图标库添加至您的小程序项目中。 接下来，获取在线链接，通常在添加至项目后会自动生成。 **链接中的图标代码，然后打开小程序的开发者工具。
推荐方法：通过阿里巴巴图标库获取矢量字体文件，将其引入小程序，并在 wxss 文件中定义图标样式。具体步骤如下：在 Iconfont 上选择并添加图标到购物车。将图标添加到项目，并获取在线链接中的代码。将代码**到小程序 wxss 文件中。在 wxss 文件中定义图标的样式，包括字体名称、颜色、大小等。
具体操作步骤如下： 从阿里巴巴矢量库下载项目所需的iconfont字体文件。 使用Online @font-face generator网站，上传字体文件并选择base64编码格式，完成转换后下载文件。 将下载得到的base64编码内容，**至小程序的wxss文件中的stylesheet.css样式表中，即可成功引用iconfont字体图标。
微信小程序使用iconfont及引入vant-icon使用iconfont
1、打开微信小程序的开发者工具，在项目的结构中新建一个名为“styles”的文件夹。在“styles”文件夹中创建一个“iconfont.wxss”文件，将**的代码粘贴到该文件中。引入样式文件：确保在您的app.wxss文件中已经引入了“iconfont.wxss”文件，这样整个小程序中都可以使用这些图标。
2、在微信小程序中使用iconfont的步骤如下：获取所需字体图标：访问 iconfont.cn 网站，搜索你需要的图标。将选中的图标“添加入库”，然后进入购物车页面，点击“下载代码”按钮下载压缩文件。转换字体文件为base64格式：解压下载的压缩文件，找到其中的ttf字体文件。
3、微信小程序集成阿里巴巴矢量图标库icon-font的步骤如下：首先，从官网iconfont-阿里巴巴矢量图标库选择所需的图标，点击“购物车”进行添加。 确认图标选择后，点击“添加至项目”，将图标库添加至您的小程序项目中。 接下来，获取在线链接，通常在添加至项目后会自动生成。
4、具体操作步骤如下： 从阿里巴巴矢量库下载项目所需的iconfont字体文件。 使用Online @font-face generator网站，上传字体文件并选择base64编码格式，完成转换后下载文件。 将下载得到的base64编码内容，**至小程序的wxss文件中的stylesheet.css样式表中，即可成功引用iconfont字体图标。