Christian HelmsAs a free action, can I cast Iconify Project?
Searching deep within the Nethalion Archives has finally rewarded your diligence. Blowing the dust from the ancient script, you read and discover your search has ended. Now, with the scroll of “How to Use Font Awesome with Vue.js,” the adventure can begin.
Whether you’re a 10th level code Wizard or a level-1 Medium, there’s no reason your coding cantrip should be stuck at Prestidigitation. Crank up “Back in Black,” cast Call Lightning, and rock hard, code bard!
Before We Get Started
No ninth-level magic is necessary because we’ve made using Font Awesome with Vue.js as straightforward as possible. This article will take a boilerplate Vue project, download and import Font Awesome, and render an icon.
Before we get started, you can follow along by going to our Github repository to fork and clone the example project. Then go to the Readme.md file to get the project up and running on your machine.
Note – This example project was created using the Vue CLI boilerplate that we stripped down to keep it really simple to follow along.
Installation
Before we can transfer this incantation into our spellbook, we need to get our project set up. Open your terminal and change directory (cd) into the example project for this guide.
We’ll install three different packages—and feel free to use the package manager of your choice. In this article, we’ll use NPM.
1. Install the base Font Awesome SVG library.
npm i --save @fortawesome/fontawesome-svg-core2. Next, install a Font Awesome icon set.
We’ll use Font Awesome Free Solid, but there are many more icon sets you can use.
npm i --save @fortawesome/free-solid-svg-icons3. Then we’ll need to install the Font Awesome Vue component (vue-fontawesome).
This package that contains the magic that makes Font Awesome work with Vue 2.
npm i --save @fortawesome/vue-fontawesomeNote – Vue three support coming soon.
Importing Vue Font Awesome
Before we render our first icon, we need to import the freshly installed dependencies into our project. In the src/main.js file enter the following:
import { library } from '@fortawesome/fontawesome-svg-core'
import { faHatWizard } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'Ok, sure, but what do these spell components do?
1. The “Library” is the way to subset or reduce file sizes and reference icons easily.
We can add multiple icons to our library so we can use them throughout our whole project.
2. We need to import the icons we want to use in our project.
3. FontAwesomeIcon is the magic that renders icons in our Vue projects.
Note – You can add more than one icon by separating each with a comma.
Now we just tell the library what Font Awesome icons to use:
library.add(faHatWizard)The final spell component is telling Vue.js about our Font Awesome icon component.
Vue.component('font-awesome-icon', FontAwesomeIcon)Rendering An Icon
Now let’s make some magic and render an icon! Believe it or not, this is the easiest part. We’ve already done all the configuring within our project to display the icon. All that’s left to do is call the FontAwesomeIcon component and tell it which icon to render from our library.
Go to the components folder, then open the HelloWorld.vue file.
In the HelloWorld.vue file you’ll want to add <h1><font-awesome-icon icon=”hat-wizard” /></h1> to your template.
Your template should resemble this:
Save all the files you edited and get ready to see the fireworks. Launch your project by running `npm serve` in your terminal and navigating your browser to http://localhost:8080.
Hocus pocus, Abracadabra!!! You should see our beautiful wizard hat on your screen. What an adventure! You earn 1000xp and 50gp. Phew, you are so much closer to leveling up!
What Next?
Now you’re ready to take on that Boss monster and bring it down with a well-placed Fireball! Grab more icons, add them to your project, and watch the magic unfold before your eyes.
An excellent next step in your journey to using Vue Font Awesome is to get even more Tabletop Gaming icons with Font Awesome Pro.
