在 vue 组件上从超棒的字体呈现社交图标

Question

所以目前我正在尝试开发自己的网站，我正在从常规的 HTML、CSS 和 JS 范式切换到使用 VueJs。我正在努力将我的一些代码从我原来的 HTML 文件转移到 Vue JS 组件，特别是我渲染社交图标的代码。我看到的大多数教程都是在主组件上渲染它 App.vue，但是，当我尝试在子组件上渲染时，我有点卡住了。

Here is my original HTML code:

Here is my configuration to import my social icons:

目前，我已经按照教程在 main.js 中执行此导入后，我只是尝试替换

<i class="fa fa-github fa-2x" aria-hidden="true"></i>

在我的组件模板中

<fa-icon :icon="['fas', 'github']"/>,

但是，没有渲染任何内容。我没有在我的子组件中导入任何东西，因为我认为对于初始导入我可能不需要做任何事情。很想知道有关解决此问题的任何见解。

Answer 1

假设您使用的是 Font Awesome 5，品牌图标使用 fab 前缀。

因此

<fa-icon :icon="['fas', 'github']"/>,

应该是

<fa-icon :icon="['fab', 'github']"/>,

fab fa-github

在 vue 组件上从超棒的字体呈现社交图标

Rendering social icons from font awesome on a vue component

html

javascript

web

font-awesome

vue.js