微信小程序图标库，微信小程序iconfont

微信小程序引入阿里巴巴矢量图标库icon-font

微信小程序引入阿里巴巴矢量图标库iconfont的步骤如下：选择图标：从阿里巴巴矢量图标库官网选择所需的图标，点击“购物车”图标进行添加。添加至项目：确认图标选择无误后，点击“添加至项目”，将所选图标库添加到您的微信小程序项目中。获取在线链接：添加至项目后，系统会自动生成一个在线链接，用于访问图标库。

微信小程序集成阿里巴巴矢量图标库icon-font的步骤如下：首先，从官网iconfont-阿里巴巴矢量图标库选择所需的图标，点击“购物车”进行添加。 确认图标选择后，点击“添加至项目”，将图标库添加至您的小程序项目中。 接下来，获取在线链接，通常在添加至项目后会自动生成。

阿里巴巴矢量图标库提供了丰富的图标资源，搜索需要的图标，将其添加到购物车，并导入到自己的项目中。获取图标代码时需注意，当项目更新后，代码也需要同步更新。创建一个iconFont.wxss文件，复制获取到的代码。新增图标时，@font-face 需要相应更新。

在iconfont上选取所需图标，添加到库内并生成font class代码。点击链接进入页面复制全部代码。在微信小程序项目中，创建style文件夹，建立对应的wxss文件，将生成的css代码复制进去。在APP.wxss文件中引用此样式文件，使用view class=iconfont icon-shangxiahuadong/view显示图标。

西瓜助手 公众号分析、智能编辑器、定时发送等等功能，针对公众号。新媒体管家 新媒体账号管理，很实用。配图网站 百度图片 没错，就是百度，需要某一类型的图片直接搜是最快的。Icon-Font 这里有最全的矢量图标。Unsplash 摄影类图片网站，每天更新10张，分辨率很高，拍摄角度特别。

微信WeUI设计规范详细解读

微信WeUI设计规范详细解读 WeUI是一套与微信原生视觉体验一致的基本样式库，由微信官方设计团队为微信网页和微信小程序量身定制。它旨在统一用户感知，包括button、cell、dialog、progress、toast、article、actionsheet等多种元素，以及微信weui开发团队可以直接使用的icon等。

微信WeUI设计规范详细解读如下：基础样式库：目的：微信WeUI是微信官方为网页和小程序提供的基础样式库，旨在提供与原生视觉体验高度契合的设计元素。组件应用：开发者可以无缝应用如button、article、dialog、actionsheet等组件，以及icon等，确保用户在使用过程中的统一感。

微信WeUI设计规范详细解读如下：概述 微信WeUI是一个专为微信网页和小程序定制的样式库，旨在保持与微信原生视觉体验的一致性，以实现统一的用户感知。它提供了包括button、cell、dialog等元素在内的丰富设计资源，帮助设计师快速启动产品设计。

阿里图标库icon的symbol在微信小程序中的使用方式

1、选择图标：从阿里巴巴矢量图标库官网选择所需的图标，点击“购物车”图标进行添加。添加至项目：确认图标选择无误后，点击“添加至项目”，将所选图标库添加到您的微信小程序项目中。获取在线链接：添加至项目后，系统会自动生成一个在线链接，用于访问图标库。复制图标代码：复制该在线链接中的图标代码。

2、首先，从官网iconfont-阿里巴巴矢量图标库选择所需的图标，点击“购物车”进行添加。 确认图标选择后，点击“添加至项目”，将图标库添加至您的小程序项目中。 接下来，获取在线链接，通常在添加至项目后会自动生成。 复制链接中的图标代码，然后打开小程序的开发者工具。

3、推荐方法：通过阿里巴巴图标库获取矢量字体文件，将其引入小程序，并在 wxss 文件中定义图标样式。具体步骤如下：在 Iconfont 上选择并添加图标到购物车。将图标添加到项目，并获取在线链接中的代码。将代码复制到小程序 wxss 文件中。在 wxss 文件中定义图标的样式，包括字体名称、颜色、大小等。

4、在iconfont上选取所需图标，添加到库内并生成font class代码。点击链接进入页面复制全部代码。在微信小程序项目中，创建style文件夹，建立对应的wxss文件，将生成的css代码复制进去。在app.wxss文件中引用此样式文件，使用view class=iconfont icon-shangxiahuadong/view显示图标。

5、可使用网站如 giftofspeed.COM/base64-... 进行字体压缩。压缩后得到相应的 base64 代码。接下来，返回微信小程序，找到 App.wxss 文件，将字体替换为 base64 字符串格式。示例代码如下：（提供示例代码）完成替换后，进入页面使用，图标即可正常显示。