uni-app 引入iconfont

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

先上效果图：

效果图

---

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

  添加到项目

• 在项目中复制Unicode
  

  复制Unicode

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

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

    
    
    复制到App.vue

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

  复制代码



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中的样式代码即可
  
  替换样式代码