小程序使用阿里巴巴矢量图标库

湫鹤椿水2024-04-27 14:38

一、登录官网

www.iconfont.cn

二、在搜索框中搜索想要的图标，将鼠标移动到图标上会看到三个标记

可以使用下载，直接使用：

可以使用css文件使用：
- 首先点击购物车样式的选项，而后点击下图位置：

点击自己创建的项目，如果没有要创建

点击项目后进入下一步骤。

三、下载（复制）样式文件

点击下面：

复制网页中的代码，并在小程序中创建全局样式文件app.wxss或者app.scss
然后再项目中使用text标签，通过class属性指定。

html 复制代码

<view class="info">
<text><text class="iconfont icon-tongchengpeisong"></text>同城配送</text>
<text><text class="iconfont icon-src_http___pic30photophotocn_20140223_0022006080"></text>行业龙头</text>
<text><text class="iconfont icon-shijian"></text>半小时送达</text>
<text> <text class="iconfont icon-haoping"></text>100%好评</text>
</view>

那么类名怎么指定，来自咱从网站创建的app.wxss(app.scss)文件中的类名，下面展示部分：

css 复制代码

.icon-tongchengpeisong:before {
  content: "\e61b";
}

四、注意点

因为阿里巴巴默认没有使用base64编码，所以导致微信小程序报错，为了去掉报错，可以修改项目设置，从新生成新的css代码：

最后点进网址，复制到自己的app.wxss中。