微信小程序引入外部矢量图标阿里巴巴矢量图标

1.显示效果

2.实现步骤

进入阿里巴巴矢量图标库

搜索想要的矢量图标并加入购物车，点击右上角购物车

将图标添加至项目

更改项目设置

将字体格式设置为TTF Base64

 

点击下载至本地

 在微信小程序中新建文件夹

 将下载到本地的文件中的iconfont.css拖拽到微信小程序新建的文件夹中

 更改后缀名为wxss

将矢量图复制到class中

 使用图标：

在app.wxss中引入文件

1.  
   <view>
2.  
   <text class="iconfont icon-kafei"></text>
3.  
   <text class="iconfont icon-yaopin"></text>
4.  
   <text class="iconfont icon-yinle"></text>
5.  
   <text class="iconfont icon-lvxing red"></text>
6.  
   <text class="iconfont icon-wangyou red"></text>
7.  
   <text class="iconfont icon-dianpu red"></text>
8.  
   <text class="iconfont icon-tupian blue"></text>
9.  
   <text class="iconfont icon-kouhong blue"></text>
10.  
    <text class="iconfont icon-qiandai blue"></text>
11.  
    </view>

1.  
   /* pages/iconfont/iconfont.wxss */
2.  
   view{
3.  
   display: flex;
4.  
   flex-wrap: wrap;
5.  
   }
6.  
   .iconfont{
7.  
   font-size: 200rpx;
8.  
   line-height: 250rpx;
9.  
   padding: 20rpx 16rpx;
10.  
    }
11.  
    .red{
12.  
    color: red;
13.  
    }
14.  
    .blue{
15.  
    color: blue;
16.  
    }

这篇好文章是转载于：学新通技术网