微信小程序图标库-微信小程序logo图标

前言：不是每个程序员都会PS微信小程序图标库，但是会PS的程序员无疑是nb。 自从有了阿里图标库，就不用再找UI设计图标了。 将其加入书签。

阿里图标官网网址：

指示：

第一种方法：在搜索框中输入关键字，选择合适的图标，自定义颜色和大小，点击下载。 是不是很方便？

第二种：可以收藏图标微信小程序图标库，添加到项目库中。 这里详细说明如何引用项目库中的图标

在我的项目中找到对应的项目，然后下载到本地，或者参考网上的链接会更方便

Unicode 参考

第一步：给HTML页面的字体添加preload，提高字体加载速度：

第二步：复制项目下生成的@font-face

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_2210326_uryikoh8w0e.woff2?t=1622443244586') format('woff2'),
       url('//at.alicdn.com/t/font_2210326_uryikoh8w0e.woff?t=1622443244586') format('woff'),
       url('//at.alicdn.com/t/font_2210326_uryikoh8w0e.ttf?t=1622443244586') format('truetype');
}

第 3 步：使用 iconfont 定义样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第四步：选择对应图标并获取字体代码，应用到页面中

3

字体类参考

第一步：给HTML页面的字体添加preload，提高字体加载速度：

第二步：导入项目下生成的fontclass代码：

第三步：选择相应的图标并获取类名，应用到页面中：

符号参考

第一步：导入工程下生成的符号代码：

第二步：添加常用的CSS代码（只引入一次）：

第三步：选择相应的图标并获取类名，应用到页面中：

以上是页面引用iconfont图标的几种方法，有兴趣的朋友可以试试。

我是一名小程序软件开发人员。 每天分享开发过程中遇到的知识点。 如果对你有帮助，请点个赞离开。 非常感谢你。