Fontawesome 5.1 Brand/Regular/Light Icon With Vue.js

June 15, 2019
Could not find one or more icon(s)

Setup FontAwesome 5.1.x for Vue.js.

Install brand icon.

yarn add @fortawesome/free-brands-svg-icons

Import

import { library } from '@fortawesome/fontawesome-svg-core';
import { faTwitter, faInstagram, faFacebookF } from '@fortawesome/free-brands-svg-icons';

library.add(faTwitter, faInstagram, faFacebookF);

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

Usage

<div>
    <a href="https://twitter.com/nuanxinya918" class="mx-2"><font-awesome-icon :icon="['fab', 'twitter']" size="lg" /></a>
    <a href="https://www.instagram.com/nuanxinya918/" class="mx-2"><font-awesome-icon :icon="['fab', 'instagram']" size="lg" /></a>
    <a href="https://www.facebook.com/groups/nuanxinya918/" class="mx-2"><font-awesome-icon :icon="['fab', 'facebook-f']" size="lg" /></a>
</div>

NOTE: <font-awesome-icon icon="twitter" /> won’t work as it will use fas (solid) prefix. I assume prefix would be required for Regular (far) and Light (fal) icon as well.

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.