微信小程序可以使用外部icon，比较常用的就是iconfont，可以搜索想要的icon和选择想要的颜色然后png下载，然后放到小程序的images文件夹里本地使用。

为了节省空间，也可以在线使用

• 在iconfont官网中我的页面创建一个自己的项目

 

• 然后回到首页，搜索自己想要的icon

• 选择喜欢的一个，点击购物车 图标，添加入库

• 点击右上角的 购物车 

• 点击添加至项目

• ​​​​​​​选择第一步创建的那个项目

 

• 来到我的项目

• 可以根据自己的习惯改变icon名字

• 点击查看在线链接

• 如果是第一次查看的话，会显示暂无代码，点击生成，如果不是第一次，则会显示更新代码

• 然后点击链接，进入到css页面。将页面的所有内容复制，到项目的根目录下新建一个iconfont.wxss文件，将内容复制进去。

• 然后在app.wxss中导入

  

• 将 font-family: "iconfont" !important; 改成 font-family: "icon" !important;

• 接下来就可以使用啦
• 这里可以改变icon的大小，但是所有的都会统一

 

通过view调用，可以直接在view上改变大小，使用font-size属性

<view class="iconfont icon-usermsg" style="font-size: 38px;" />

也可通过vant组件调用，使用size属性更改大小，color属性可以直接更改想要的颜色

<van-icon class="iconfont" class-prefix="icon" name="usermsg" size="38px" color="red"/>

​​​​​​​