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

Jun 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.

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.