在 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