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

2022-07-29 12:05:01 阅读：207 来源： 互联网

标签：uniapp vue svg fortawesome fontawesome Font 图标

问题描述：新建的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/

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

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

标签：uniapp,vue,svg,fortawesome,fontawesome,Font,图标
来源： https://www.cnblogs.com/huangenai/p/16531762.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9