在 uni-app 中 使用字体图标

在 uni-app 中 使用字体图标

下载iconfont字体图标

• 进入 iconfont 官网 本地下载 图标文件压缩包
• 解压 出来
• 在uni-app 项目static 下 新建 fonts 文件夹
• 把 iconfont.css 以及 字体图标文件 复制到 fonts 中

在 uni-app 中使用

• 全局使用 字体图标
  • 在App.vue 中使用 @import url("./static/fonts/iconfont.css") 引入iconfont.css文件
  • 在iconfont.css文件中修改 所有的引入字体图标路径 在前面加 ~@/static/fonts/
  • 然后使用 view 标签 添加类名 iconfont 对应的字体图标类名 即可使用
• 局部使用 字体图标
  • 局部使用方法基本一样，只是引入 iconfont.css 的位置不同 。
  • 局部使用 在要使用字体图标的 vue 文件中引入 iconfont.css 即可