在 vue 组件上从 font awesome 渲染社交图标

Question

So currently I am trying to develop my own website, and I am switching from the regular HTML,CSS, and JS paradigm to using VueJs. I am struggling to transfer some of the code I have from my original HTML file to a Vue JS component, specifically my code that is rendering social icons. Most of the tutorials I am seeing, are rendering it on the main App.vue, however, when I am trying to render on a child component I am getting a bit stuck.

Here is my original HTML code:

Here is my configuration to import my social icons:

Currently, I have followed the tutorial where after doing this import in my main.js, I simply tried replacing

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

in my component template with

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

however, nothing is rendering. I didn't import anything in my child component, because I thought with the initial import's I may not have to do anything. Would love to know any insights on going about this issue.

Answer 1

Assuming you're using Font Awesome 5, brand icons use the fab prefix.

Therefore

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

Should be

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

fab fa-github