官网字体图标传送门：https://uniapp.dcloud.io

先上效果图：

效果图

• 在iconfont中找到需要的图标，将其添加到项目中

  

  添加到项目

• 在项目中复制Unicode

  

  复制Unicode

• 将复制的代码粘贴到uni-app的App.vue下的style标签下

  • 注：font-family可以自定义为你想要的名字（使用时需要用到）

    

    复制到App.vue

• 在iconfont项目中复制你要使用的图标的代码，在uni-app中使用它

  

  复制代码

<text class="icon">&#xe600;</text>

uni-app中使用

• 自定义图标的大小、颜色等样式

.icon {  /* font-family需要和自定义的相同 */   font-family: "iconfont" !important;   ont-size: 40upx;   font-style: normal;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}

增加新图标方法

• 将新的图标放到同一个项目中
• 复制新的代码替换 App.vue中的样式代码即可
  

  替换样式代码

原著是一个有趣的人,若有侵权,请通知删除