How to fix an icon that is not showing (FontAwesome)

Asked By: Anonymous

The icon i want to display is not showing up.

I installed FontAwesome like indicated in this page: https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs

I also reinstalled it.

<font-awesome-icon 
    icon="spinner" 
    class="fas fa-spinner fa-spin fa-3x fa-fw">
</font-awesome-icon>

<span class="sr-only">Loading...</span>

The following error message is displayed:

Could not find one or more icon(s) {prefix: “fas”, iconName: “spinner”}

No icon is shown.

Solution

Answered By: Anonymous

Mostly likely you’re not adding the icon into the library from the @fortawesome/fontawesome-svg-core package for use by the component.

import Vue from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faSpinner } from "@fortawesome/free-solid-svg-icons";

Vue.component("font-awesome-icon", FontAwesomeIcon);

library.add(faSpinner);

Once you do that, there is no need to specify the classes anymore. So if you need a spinner icon that spins, is 3x as large and has fixed-width — you should do the following instead.

<font-awesome-icon 
  icon="spinner" 
  size="3x" 
  spin fixed-width>
</font-awesome-icon>

Reference:

https://github.com/FortAwesome/vue-fontawesome#basic