vue uniapp 使用 fontawesome 打包Android 图片svg 不显示解决方案

问题描述：新建的uniapp项目，按照fontawesome 说明的方法是用图标，在web上运行显示正常，但是打包到android运行打开的时候图标不显示，debug进去查看无异常。

 

探索过程：在其官方的问答社区中搜索可能是不支持svg。

正常的vue 项目引用fontawesome如下：

1. 安装基础 Font Awesome SVG 库。

npm i --save @fortawesome/fontawesome-svg-core

2.安装一个Font Awesome 图标集。

npm i --save @fortawesome/free-solid-svg-icons

3. 然后我们需要安装 Font Awesome Vue 组件 ( vue-fontawesome )。

npm i --save @fortawesome/vue-fontawesome

4.导入 Vue 字体

import { library } from '@fortawesome/fontawesome-svg-core'

import { faHatWizard } from '@fortawesome/free-solid-svg-icons'

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

5.告诉库使用什么 Font Awesome 图标

library.add(faHatWizard)

6.告诉 Vue.js 我们的 Font Awesome 图标组件

Vue.component('font-awesome-icon', FontAwesomeIcon)

7.使用它

<font-awesome-icon class="v5-icon" :icon="['fa', 'lock']" />

以上这种方法web 打开是没有问题的，但是运行到android就图标无法显示。

最终的解决方案：只能放弃图标是用svg的形式

解决方案是如下

//安装包
npm i @fortawesome/fontawesome-free
// main.ts 导入
import '@fortawesome/fontawesome-free/css/all.min.css'
// login.vue 页面中使用它
<i class="v5-icon fa fa-user"></i>

来看一下运行到android 手机 两种不同方案的效果

 

 

参考：https://blog.fontawesome.com/how-to-use-vue-js-with-font-awesome/

此随笔乃本人学习工作记录，如有疑问欢迎在下面评论，转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。