Full guide to using Font Awesome icons in Vue.js apps

The Font Awesome icon collection is, well, awesome. Nearly 4,000 icons that are incredibly easy to use, about 1300 of which are open source and free to use in any application. As a budding Vue.js programmer, this library seemed like an excellent way to spiff up the application I’m developing.

While the Font Awesome team provides good integration with Vue.js, the instructions were lacking on specifically how to use the library. That led to a few hours of spinning my wheels getting it to work, and discovering several ways to use the Font Awesome icons.

In this article, we’ll go over the methods for using Font Awesome icons in a Vue.js application, contrasting between them, and then go over a couple Vue.js specific methodologies for using icons.

Font Awesome website: https://fontawesome.com/

Getting started

When developing a Vue.js application we’re most likely assembling components using npm (the de-facto standard package manager for Node.js) and using Webpack to assemble the application.

A Github repository containing the code discussed in this article is at: https://github.com/robogeek/vuejs-fontawesome-examples

As a Vue.js programmer, you probably have Node.js and npm installed. If not head to https://nodejs.org/en/ for an installable package, or to https://nodejs.org/en/download/package-manager/ for instructions on installation using package management systems.

Next, we install the Vue.js CLI tool because it can provide scaffold applications for us to play with. Installation instructions are on the website: https://cli.vuejs.org/guide/installation.html

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Once that’s installed you can type vue --version to verify its existence.

Next, we initialize a demo application that’s built using Webpack:

$ vue init webpack-simple 001-start
? Project name vuejs-fontawesome-get-started
? Project description Vue.js Fontawesome Getting Started
? Author David Herron <david@davidherron.com>
? License MIT
? Use sass? No

 vue-cli · Generated “001-start”.

 To get started:

 cd 001-start
 npm install
 npm run dev

If you like, you can follow the instructions printed by the tool. Before we do, let’s turn our attention to the Font Awesome instructions for Vue.js integration. https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs

npm install --save @fortawesome/fontawesome-svg-core 
npm install --save @fortawesome/free-solid-svg-icons 
npm install --save @fortawesome/vue-fontawesome

We are advised to install these packages from npm, so let’s do so then run the recommended steps. We’ll see the blank Vue.js demo application. But we want to perform the surgery recommended in the Font Awesome documentation.

You can try this on your own, or browse an interactive demo:

Vue.js + Font Awesome #1 — Getting started

The online code editor tailored for web applications

In the generated source, first change main.js to this:

import Vue from 'vue'
import App from './App.vue'

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCoffee)

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

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})

This gets the library object, and loads one of the icons from the “free-solid-svg-icons” package. That icon is later added to the library. Next, we load FontAwesomeIcon which is the Vue.js component, and register it with Vue.js as a global component. Finally, we set up the application to render.

Now we need to turn to App.vue, which we replace with the following:


<template>
  <div id="app">
    <h1>Getting Started with Vue.js and Font Awesome</h1>
    <p>Have a cup of coffee: <font-awesome-icon icon="coffee" /></p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

This is what Vue.js calls a Single File Template. It contains the template, JavaScript and CSS all in one convenient file. It’s a cool idea, and its implementation is buried in the Webpack configuration you’ll see in the directory. We don’t need to investigate the Webpack configuration, it’ll be enough to simply use it.

Now when we run npm run dev the web browser will automatically load this page:

That’s cool, we have this nifty custom HTML tag we can easily use to load in icons. Great. If you glance through the Font Awesome documentation you see it’s possible to layer icons and add various effects like rotations. It promises to be fun.

Showing the JavaScript or Vue.js brand icon

The Font Awesome project includes many “brand” icons for things like JavaScript and Vue.js.

When we created the demo application it was stored in a directory named 001-start. Duplicate that directory, calling the new one 002-brands. Or you can view the interactive demo:

Vue.js + Font Awesome #1 — Getting started

The online code editor tailored for web applications

In App.vue in the new directory, change the template to:

<template>
  <div id="app">
    <h1>Using Font Awesome "Brand" icons in Vue.js</h1>
    <p>Have a cup of coffee: <font-awesome-icon icon="coffee" /></p>
    <p>Have a module of JavaScript: <font-awesome-icon icon="js" /></p>
    <p>Have a module of Vue.js: <font-awesome-icon icon="vuejs" /></p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

The second is an attempt to load the JavaScript icon. The Font Awesome website provides a search function. Enter “javascript” and you’ll find “js” is the code for the JavaScript icon, and likewise, the Vue.js icon has the code “vuejs”.

Now run this application, npm run dev, and you’ll see the icons are not there. In the browser JavaScript console, you’ll see an error that the icon was not found. In other words, it’s not all groovy, because we now have to learn a few things.

First step is to look in the distribution directory:

$ ls node_modules/@fortawesome/free-solid-svg-icons/

This shows a long list of files with names like faCoffee.js. Take a look inside that file and you’ll find a bunch of data, including a string constant named svgPathData, that is clearly meant to drive generation of SVG. We don’t need to worry about the details, just know that it’s here.

The important thing is none of those files contain a JavaScript or Vue.js icon.

The Font Awesome icon library is not one library, but instead four libraries and we have only loaded one of the libraries. The total set are:

Solid: https://www.npmjs.com/package/@fortawesome/free-solid-svg-icons
Regular: https://www.npmjs.com/package/@fortawesome/free-regular-svg-icons
Light: no corresponding npm package
Brands: https://www.npmjs.com/package/@fortawesome/free-brands-svg-icons

Next if we study the Icon browser (https://fontawesome.com/icons?d=gallery) we see in the sidebar some checkboxes corresponding to those four groups. Try clicking the Free choice first, then clicking on the four groups, and you’ll see the Icon browser shows different subsets corresponding to the choices.

Because the JavaScript and Vue.js icons are in the Brands section, verifiable using the Icon browser, we need to load that package:

$ npm install — save @fortawesome/free-brands-svg-icons

This suggests that main.js should be changed as so:

import { library } from ‘@fortawesome/fontawesome-svg-core’;
import { faCoffee } from ‘@fortawesome/free-solid-svg-icons’;
import { faJs, faVuejs } from ‘@fortawesome/free-brands-svg-icons’;
import { FontAwesomeIcon } from ‘@fortawesome/vue-fontawesome’;
library.add(faCoffee, faJs, faVuejs);

But this does not help resolve the error message in the browser console.

Before we describe the solution to this problem, let’s go over the other ways to use Font Awesome icons.

FontAwesome CSS

I suggested creating a directory named 002-brands for the code in the previous section. Duplicate that directory to create 003-css and make a few modifications. Or you can use the online demo:

Vue.js + Font Awesome #1 — Getting started

The online code editor tailored for web applications

Otherwise, type this command:

npm remove -S @fortawesome/fontawesome-svg-core 
    @fortawesome/free-brands-svg-icons 
    @fortawesome/free-solid-svg-icons 
    @fortawesome/vue-fontawesome
npm install

This removes the Vue.js support we just worked with.

Edit main.js as so:

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  render: h => h(App)
});

Then in App.vue change the template section as so:

<template>
  <div id="app">
    <link rel="stylesheet" 
        href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 
        integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" 
        crossorigin="anonymous">
    <h1>Using Font Awesome "Brand" icons in Vue.js</h1>
    <p>Have a cup of coffee: <i class="fas fa-coffee"></i> </p>
    <p>Have a module of JavaScript: <i class="fab fa-js"></i> </p>
    <p>Have a module of Vue.js: <i class="fab fa-vuejs"></i> </p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

This comes from two pages:

https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use — Covers use of the <i> element as shown here.
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started — Gives us the <link> element shown here

The <link> of course belongs in the <head> section of your HTML. This particular CSS uses icon fonts for all four of the Font Awesome libraries shown earlier.

Notice that for the coffee icon the “fas” class is used, while for the js and vuejs icon the fab class is used. That’s a side-effect of those two being in the brands library, versus the solid library.

When used this way, displaying a Font Awesome icon uses the <i> tag as shown here. The Font Awesome website documentation focuses on using this tag. Therefore as a Vue.js programmer you’ll have to become adept at switching between their documentation, and using the provided Vue.js component (<font-awesome-icon>).

For this example, we completely disposed of the Vue.js support. It means we have one large CSS file containing the entire collection icons. The trade-off is that it’s very convenient to have the entire Font Awesome library available with just one <link> element. The downside is memory footprint, by loading every icon. Our application is not going to use the entire library, it’s more likely to be using only a handful, so why should the browser be given the entire library?

By contrast, the packaging scripts used in the previous example ensures packaging only the required code, and nothing more. Impact on the browser is kept small using the previous method, at the cost of writing a little bit more code.

But, hey, it works. Sometimes working code trumps architectural purity.

The fontawesome-free package

The fontawesome-free package includes the same files Font Awesome hosts on their CDN, see https://www.npmjs.com/package/@fortawesome/fontawesome-free

First, duplicate the 003-css working directory to create a new one, 004-fontawesome-free. If you wish to try the online demo, click on the following, but be warned that it does not work correctly. You’ll need to perform this step on your laptop.

Vue.js + Font Awesome #1 — Getting started

The online code editor tailored for web applications

In that directory install the package as so:

$ npm install @fortawesome/fontawesome-free — save

Check the installed package:

$ ls node_modules/@fortawesome/fontawesome-free

And you’ll find several directories

/js — All JavaScript files associated with Font Awesome 5 SVG with JS
/css — All CSS using the classic Web Fonts with CSS implementation
/sprites — SVG icons packaged in a convenient sprite
/scss, /less — CSS Pre-processor files for Web Fonts with CSS
/webfonts — Accompanying files for Web Fonts with CSS
/svg — Individual icon files in SVG format

Then in App.vue change the <link> element to this:

<template>
  <div id="app">
    <link rel="stylesheet" 
        href="node_modules/@fortawesome/fontawesome-free/css/all.css">
    <h1>Using Font Awesome "Brand" icons in Vue.js</h1>
    <p>Have a cup of coffee: <i class="fas fa-coffee"></i> </p>
    <p>Have a module of JavaScript: <i class="fab fa-js"></i> </p>
    <p>Have a module of Vue.js: <i class="fab fa-vuejs"></i> </p>
    <h1>Using Font Awesome by referencing SVG files</h1>
    <p>Have a cup of coffee: 
          <svg>
            <use xlink:href="node_modules/@fortawesome/fontawesome-free/sprites/solid.svg#coffee"></use>
          </svg>
    </p>
    <p>Have a module of JavaScript:
          <svg>
            <use xlink:href="node_modules/@fortawesome/fontawesome-free/sprites/brands.svg#js"></use>
          </svg></p>
    <p>Have a module of Vue.js: 
          <svg>
            <use xlink:href="node_modules/@fortawesome/fontawesome-free/sprites/brands.svg#vuejs"></use>
          </svg></p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

With no more changes, the icons all appear as before. This is as expected, because all we’ve done is to load the same file but from the local assets.

An alternate is using the SVG Sprites in the package. Another section has been added in this template to reference the raw SVG files.

This works, and obviously requires a little more work to get the sizing correct.

Getting back to Vue.js and Font Awesome

A couple sections back we left off with an unanswered problem: How to use the JavaScript or Vue.js or other icons from the Font Awesome brands library in a Vue.js application?

If we duplicate the 002-brands directory to 005-brands-2 we can start from where we left off. There is also an online demo at:

Vue.js + Font Awesome #1 — Getting started

The online code editor tailored for web applications

The detour through other aspects of Font Awesome taught us a few information details we can now bring to bear on that question.

What we’ve learned is the JavaScript and Vue.js icons are in the brands library. When using the <i> element methodology (https://fontawesome.com/how-to-use/with-the-api/setup/importing-icons) we are supposed to use these patterns:

Solid icons have prefix “fas” and use <i class=”fas fa-flag”>
Regular icons have prefix “far” and use <i class=”far fa-flag”>
Light icons have prefix “fal” and use <i class=”fal fa-flag”>
Brands icons have prefix “fab” and use <i class=”fab fa-font-awesome”>

The standing problem is that brands icons do not show up, and we see here one is supposed to use a prefix “fab” for brands icons.

The npm package (https://www.npmjs.com/package/@fortawesome/vue-fontawesome) has additional useful documentation that is so useful one wonders why this is not on the Font Awesome website. There is a lot here we’ll explore in the due course in time. The immediate task is to learn how to specify a prefix.

Namely, a prefix is specified using an array syntax:

<font-awesome-icon :icon=”[‘fas’, ‘spinner’]” />

The prefix is the first element in the array, the icon name is the second. Under the hood the FontAwesomeIcon component automatically adds the “fa-” to the front of the icon name, and if the library prefix is not specified it uses the “fas” library (solid). Which explains why the JavaScript and Vue.js icons did not load, because we did not explicitly use the “fab” prefix.

We can remedy this by making the following code change in App.vue:

<p>Have a module of JavaScript: 
    <font-awesome-icon :icon=”[ ‘fab’, ‘js’ ]” /></p>
<p>Have a module of Vue.js: 
    <font-awesome-icon :icon=”[ ‘fab’, ‘vuejs’ ]” /></p>

And immediately the icons pop right up:

In addition to solving that specific problem we have a number of special effects to explore. These special effects can be implemented not only with the <font-awesome-icon> component, but also with the <i> approach.

Before we go off and pl..er..explore the special effects, we must stop and contrast between the two approaches.

The build process for Vue.js applications ensures that only the required code is packaged and sent to the browser. The approach of defining the <font-awesome-icon> component, and individually importing each required icon, takes a little bit more code, but the gain is that when the application reaches the browser it does not receive the entire Font Awesome icon library. Instead it only receives the code and icons your application declared.

The Vue.js integration of Font Awesome does allow this shortcut:

import { fab } from ‘@fortawesome/free-brands-svg-icons’;
 
library.add(fab);

That imports every icon in the brands library in one go, without having to individually import each icon. While this is convenient, we are warned “Be careful with this approach as it may be convenient in the beginning but your bundle size will be large.” Refer back to the discussion about minimizing application size.

Another issue we are cautioned against is this approach may not work:

import { faJs, faVuejs } from ‘@fortawesome/free-brands-svg-icons’;

This is an ES6 feature which ensures import of ONLY the requested portions of a given module. At the current time, tools like Babel are used to convert this into equivalent ES5 code, not all of which will support this feature. Because each icon is stored as an individual file inside the package, an alternative is to use this:

import faJs from ‘@fortawesome/free-brands-svg-icons/faJs’;
import faVuejs from ‘@fortawesome/free-brands-svg-icons/faVuejs’;

What happens is this references the individual file inside the package, rather than extracting the object from an aggregate package.

See the DOM in Vue apps exactly how a user does

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. https://logrocket.com/signup/

LogRocket is like a DVR for web apps, recording literally everything that happens on your site. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps – Start monitoring for free.

Special effects in Font Awesome

Looking at the Font Awesome documentation we see some tantalizing special effects that are begging to be play..er..explored.

Make a duplicate of the 005-brands-2 directory called 006-effects. An online demo for this step is at:

CodeSandbox
CodeSandbox is an online editor tailored for web applications.codesandbox.io

We have a fair bit of surgery to implement a long list of special effects supported by the Font Awesome library.

In main.js, change the imports to this:

import Vue from 'vue';
import App from './App.vue';

import { library } from '@fortawesome/fontawesome-svg-core';
import { 
    faCoffee, faSpinner, faWrench, faAmbulance, faEdit, faCircle, faCheck, faChessQueen,
    faPlus, faEquals, faArrowRight, faPencilAlt, faComment, faHeadphones, faSquare,
    faCalendar, faCertificate, faEnvelope, faTimes, faBookmark, faHeart, faPlay,
    faSun, faMoon, faStar
} from '@fortawesome/free-solid-svg-icons';
import { faJs, faVuejs, faFacebookF } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'

library.add(
    faCoffee, faSpinner, faWrench, faAmbulance, faSquare,
    faEdit, faCircle, faCheck, faChessQueen, faHeadphones,
    faPlus, faEquals, faArrowRight, faPencilAlt, faComment,
    faCalendar, faCertificate, faEnvelope, faTimes, faBookmark,
    faHeart, faPlay, faSun, faMoon, faStar,
    faJs, faVuejs, faFacebookF);

Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.component('font-awesome-layers', FontAwesomeLayers);
Vue.component('font-awesome-layers-text', FontAwesomeLayersText);

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  render: h => h(App)
});

This brings in a the icons we’ll be using in the demo, plus two new components. The new components implement a form of layered composition.

The next stage is in App.vue to change the <template> section to this:

<template>
  <div id="app">
    
<h1>Icon sizing</h1>
<font-awesome-icon icon="wrench"  size="xs" />
<font-awesome-icon icon="coffee"  size="lg" />
<font-awesome-icon icon="spinner" size="4x" />
<font-awesome-icon :icon="[ 'fab', 'vuejs' ]" size="2x" />

<h1>Rotation</h1>

<font-awesome-icon icon="spinner" rotation="90"  />
<font-awesome-icon icon="spinner" rotation="180" size="lg" />
<font-awesome-icon icon="spinner" rotation="270" size="2x"  />
<font-awesome-icon :icon="[ 'fab', 'vuejs' ]" rotation="270" size="2x"  />

<h1>Flips</h1>

<font-awesome-icon icon="ambulance" flip="horizontal" size="lg"/>
<font-awesome-icon icon="ambulance" flip="vertical" size="lg"/>
<font-awesome-icon icon="ambulance" flip="both" size="lg"/>
<font-awesome-icon :icon="[ 'fab', 'vuejs' ]" flip="vertical" size="lg"/>

<h1>Animation</h1>

<font-awesome-icon icon="spinner" spin />
<font-awesome-icon icon="spinner" pulse />
<font-awesome-icon :icon="[ 'fab', 'vuejs' ]" size="lg" spin />
<font-awesome-icon :icon="[ 'fab', 'vuejs' ]" size="lg" pulse />

<h1>Border</h1>

<font-awesome-icon icon="spinner" border size="lg"/>
<font-awesome-icon icon="ambulance" flip="vertical" border size="lg"/>

<h1>Pull left/right</h1>

<font-awesome-icon icon="spinner" pull="left" />
<font-awesome-icon icon="spinner" pull="right" />
<font-awesome-icon icon="ambulance" flip="vertical" pull="right" border size="lg"/>

<h1 style="clear: both">Power transforms</h1>

<font-awesome-icon icon="spinner" transform="shrink-6 left-4" />
<font-awesome-icon icon="ambulance" size="lg" :transform="{ rotate: 42 }" />

<h1>Masking</h1>

<font-awesome-icon icon="pencil-alt" 
    transform="shrink-10 up-.5" 
    style="background:MistyRose" 
    size="4x" />

<font-awesome-icon icon="pencil-alt" 
    transform="shrink-10 up-.5" 
    mask="comment" 
    style="background:MistyRose" 
    size="4x" />

<font-awesome-icon :icon="[ 'fab', 'facebook-f' ]" 
    transform="shrink-3.5 down-1.6 right-1.25" 
    style="background:MistyRose" 
    size="4x" />

<font-awesome-icon :icon="[ 'fab', 'facebook-f' ]" 
    transform="shrink-3.5 down-1.6 right-1.25" 
    mask="circle" 
    style="background:MistyRose" 
    size="4x" />

<font-awesome-icon icon="headphones" 
    transform="shrink-6" 
    style="background:MistyRose" 
    size="4x" />

<font-awesome-icon icon="headphones" 
    transform="shrink-6" 
    mask="square" 
    style="background:MistyRose" 
    size="4x" />

<h1>Layers</h1>

<font-awesome-layers class="fa-4x">
  <font-awesome-icon icon="circle" />
  <font-awesome-icon icon="check" transform="shrink-6" style="color: white;" />
</font-awesome-layers>

<font-awesome-layers class="fa-4x" style="background:MistyRose">
  <font-awesome-icon icon="circle" style="color:Tomato" />
  <font-awesome-icon icon="times" class="fa-inverse" transform="shrink-6" />
</font-awesome-layers>

<font-awesome-layers class="fa-4x" style="background:MistyRose">
  <font-awesome-icon icon="bookmark" />
  <font-awesome-icon icon="heart" class="fa-inverse" 
        transform="shrink-10 up-2" 
        style="color:Tomato"/>
</font-awesome-layers>

<font-awesome-layers class="fa-4x" style="background:MistyRose">
  <font-awesome-icon icon="play" transform="rotate--90 grow-2" />
  <font-awesome-icon icon="sun" class="fa-inverse" transform="shrink-10 up-2"/>
  <font-awesome-icon icon="moon" class="fa-inverse" transform="shrink-11 down-4.2 left-4"/>
  <font-awesome-icon icon="star" class="fa-inverse" transform="shrink-11 down-4.2 right-4"/>
</font-awesome-layers>

<h1>Layers text</h1>

<font-awesome-layers full-width class="fa-4x" style="background:MistyRose">
  <font-awesome-icon icon="calendar"/>
  <font-awesome-layers-text 
        class="fa-inverse" 
        transform="shrink-8 down-3" 
        value="27" 
        style="font-weight:900"/>
</font-awesome-layers>

<font-awesome-layers full-width class="fa-4x" style="background:MistyRose">
  <font-awesome-icon icon="certificate"/>
  <font-awesome-layers-text 
        class="fa-inverse" 
        transform="shrink-11.5 rotate--30" 
        value="NEW" 
        style="font-weight:900"/>
</font-awesome-layers>

<font-awesome-layers full-width class="fa-4x" style="background:MistyRose">
  <font-awesome-icon icon="envelope"/>
  <span class="fa-layers-counter" style="background:Tomato">1,419</span>
</font-awesome-layers>


  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
h1 {
  border-bottom: solid 1px black;
}
</style>

There’s a lot here. The examples are divided into sections based on the type of special effect being used.

Specific special effects are designated using attributes on the elements. It’s possible to change the size of the icon with size=”..” attributes. As you might expect, the rotation=”..” attribute rotates the icon, flip=”..” flips the icon, and so on. The attributes are mostly fairly obvious is to their function.

A not so obvious attribute is pull=”..” where the effect is similar to the floatstyle in that the icon floats at the left or right.

The <font-awesome-layers> component encapsulates a group of other icons, layering them on top of each other. It’s used for compositing new icons from the existing icons, along with the available special effects transformations.

And this is what it looks like.

The <font-awesome-icon>, <font-awesome-layers> and <font-awesome-layers-text> components are related to capabilities provided by the Font Awesome library.

Start with the documentation here: https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

Icon buttons and conditional rendering

For a last example let’s consider a common use case for icons: Toolbar Buttons. And while we’re at it, let’s look at the effect of Vue.js conditionals on choosing Font Awesome icons to render.

Duplicate the directory 002-brands to be 007-buttons-conditionals. Or try the online demo at:

CodeSandbox
CodeSandbox is an online editor tailored for web applications.codesandbox.io

In main.js change the imports to this:

import Vue from 'vue';
import App from './App.vue';

import { library } from '@fortawesome/fontawesome-svg-core';
import { 
  faCoffee, faCocktail, faGlassMartini, faBeer
} from '@fortawesome/free-solid-svg-icons';
import { 
  faJs, faVuejs, faJava, faPhp, faPython, faCss3, faHtml5 
} from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(faCoffee, faCocktail, faGlassMartini, faBeer,
      faJs, faVuejs, faJava, faPhp, faPython, faCss3, faHtml5);

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

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  render: h => h(App)
});

Again, we are importing a few new Font Awesome icons.

To put them to use, in App.vue change the <template> to the following:

<template>
  <div id="app">
    <h1>Icon Buttons and Conditional Icons</h1>
    <p>Drink: {{ drink }}
        <font-awesome-icon icon="coffee" 
                           size="4x" v-if="drink == 'Coffee'" />
        <font-awesome-icon icon="cocktail" 
                           size="4x" v-if="drink == 'Cocktail'" />
        <font-awesome-icon icon="glass-martini" 
                           size="4x" v-if="drink == 'Martini'" />
        <font-awesome-icon icon="beer" 
                           size="4x" v-if="drink == 'Beer'" />
    </p>
    <p>Language: {{ language }}
        <font-awesome-icon :icon="[ 'fab', 'js' ]" 
                           size="4x" v-if="language == 'JavaScript'"  />
        <font-awesome-icon :icon="[ 'fab', 'vuejs' ]" 
                           size="4x" v-if="language == 'Vue.js'" />
        <font-awesome-icon :icon="[ 'fab', 'java' ]" 
                           size="4x" v-if="language == 'Java'" />
        <font-awesome-icon :icon="[ 'fab', 'php' ]"
                           size="4x" v-if="language == 'PHP'" />
        <font-awesome-icon :icon="[ 'fab', 'python' ]"
                           size="4x" v-if="language == 'Python'" />
        <font-awesome-icon :icon="[ 'fab', 'css3' ]"
                           size="4x" v-if="language == 'CSS 3'" />
        <font-awesome-icon :icon="[ 'fab', 'html5' ]"
                           size="4x" v-if="language == 'HTML 5'" />
    </p>
    <p>
      <button @click="drink = 'Coffee'"> 
        <font-awesome-icon icon="coffee" size="4x" />
      </button>
      <button @click="drink = 'Cocktail'"> 
        <font-awesome-icon icon="cocktail" size="4x" />
      </button>
      <button @click="drink = 'Martini'"> 
        <font-awesome-icon icon="glass-martini" size="4x" />
      </button>
      <button @click="drink = 'Beer'"> 
        <font-awesome-icon icon="beer" size="4x" />
      </button>
    </p>
    <p>
      <button @click="language='JavaScript'">
        <font-awesome-icon :icon="[ 'fab', 'js' ]" size="4x" />
      </button>
      <button @click="language='Vue.js'">
        <font-awesome-icon :icon="[ 'fab', 'vuejs' ]" size="4x" />
      </button>
      <button @click="language='Java'">
        <font-awesome-icon :icon="[ 'fab', 'java' ]" size="4x" />
      </button>
      <button @click="language='PHP'">
        <font-awesome-icon :icon="[ 'fab', 'php' ]" size="4x" />
      </button>
      <button @click="language='Python'">
        <font-awesome-icon :icon="[ 'fab', 'python' ]" size="4x" />
      </button>
      <button @click="language='CSS 3'">
        <font-awesome-icon :icon="[ 'fab', 'css3' ]" size="4x" />
      </button>
      <button @click="language='HTML 5'">
        <font-awesome-icon :icon="[ 'fab', 'html5' ]" size="4x" />
      </button>
    </p>

  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      drink: "", language: ""
    }
  }
}
</script>

<style>
</style>

As far as active Vue.js components go this is pretty simple. We have some buttons that show various Font Awesome icons, and when clicked those buttons assign a corresponding value to a variable.

In another section of the UI we display the text code used, as well as the corresponding icon. The selection of the icon is performed with Vue.js conditionals.

After running the application, we can click on the buttons and the corresponding choices show up. The UI might look like this:

Conclusion

Icons of course add a lot to any graphical application. They convey meaning to a different level of human experience than words, and therefore can make an easier-to-learn application. Also, as symbols there is less need to translate the user interface (localization) for different languages, because well chosen symbols are universal.

With this tutorial, we’ve seen how easy it is to add icons from the Font Awesome set into your Vue.js application, and we’ve dabbled in using the underlying Font Awesome library.

The Vue.js integration for Font Awesome is built upon that underlying library. Its capabilities are presented as Vue.js components which expose most of the functionality.

Plug: LogRocket, a DVR for web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

4 Replies to “Full guide to using Font Awesome icons in Vue.js…”

anita says:

June 8, 2019 at 9:03 am

this is good guy, I love it
Patrick Jun says:

August 19, 2019 at 2:18 am

Thanks, this article helped me about fas and fab.
phạm quý says:

September 20, 2019 at 6:39 am

i very like
Tamara Acevedo says:

September 25, 2019 at 10:26 am

very nice!!, do you know how to use icons imported like that in vuetify components? like delimiter and prev/next buttons of carousel?

Full guide to using Font Awesome icons in Vue.js apps

Getting started

Vue.js + Font Awesome #1 — Getting started

Showing the JavaScript or Vue.js brand icon

Vue.js + Font Awesome #1 — Getting started

FontAwesome CSS

Vue.js + Font Awesome #1 — Getting started

The fontawesome-free package

Vue.js + Font Awesome #1 — Getting started

Getting back to Vue.js and Font Awesome

Vue.js + Font Awesome #1 — Getting started

See the DOM in Vue apps exactly how a user does

Special effects in Font Awesome

Icon buttons and conditional rendering

Conclusion

Plug: LogRocket, a DVR for web apps

Web security 101

Generating video previews with Node.js and FFmpeg

AI in browsers: Comparing TensorFlow, ONNX, and WebDNN for…

4 Replies to “Full guide to using Font Awesome icons in Vue.js…”

Leave a Reply Cancel reply

Full guide to using Font Awesome icons in Vue.js apps

Getting started

Showing the JavaScript or Vue.js brand icon

FontAwesome CSS

The fontawesome-free package

Getting back to Vue.js and Font Awesome

See the DOM in Vue apps exactly how a user does

Special effects in Font Awesome

Icon buttons and conditional rendering

Conclusion

Plug: LogRocket, a DVR for web apps

Share this:

4 Replies to “Full guide to using Font Awesome icons in Vue.js…”

Leave a Reply Cancel reply