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.