How to add Font-Awesome icons to your Vue Project

font-awesome

Getting Started

Installation

Install vue-awesome(Vue-Awesome is built upon Font-Awesome v4.5.0 and depends on Vue.js v2.0.1+.) into your vue project by running the following command in your cmd prompt(Windows) or terminal(Mac):

$ npm install vue-awesome

Now let’s go to our main.js file and import the vue component we just installed by simply adding:

import Icon from 'vue-awesome/icons'

Next we need to define the icon component as a … component. Again add this line to your main.js file:

Vue.component('icon', Icon)

Let’s go to our vue file where we desire to use the icons in. We need to import the created component as following:

import Icon from 'vue-awesome/components/Icon'

Add component Icon to your Vue instance

export default({
  name: '#demo',
  components: Icon,
  data:
})

HTML

Next up we’re creating our HTML. Let’s create a simple paragraph with our email. We want to implement an envelope icon in front of the email. In vue we imported the vue-awesome component and we can use it as follows:

<p>
   <icon name="envelope"></icon>
   &nbsp;&nbsp;Hello@example.com
</p>

Result

icon result

In this case we used an envelope icon. In order to get your own desired font icons visit FontAwesome’s Icons and look for an icon you want. Once you’ve found one:

font-awesome naming

just use the yellow highlighted name in your icon component to get the proper result. Leave out the “fa” part.

Let me know if there are any questions or if this was helpful to you in any way 🙂 I will vue every comments… get it? vue..

Check out my other tutorial on Text Animation using Transitions and Clipping Paths

For a more in-depth guide on vue-awesome by Justineo

Categories: IconsVueJS

4 Comments

Marco · July 25, 2017 at 9:26 pm

This boggles my mind. What is the benefit of using this library instead of just using the following two lines:

import ‘font-awesome/css/font-awesome.css’

What is the benefit? I don’t see it. If anything, this makes things more complicated without any good reason at all.

Marco · July 25, 2017 at 9:27 pm

The comment system somehow removes HTML code. The two lines:

import ‘font-awesome/css/font-awesome.css’

Michael E McGuire · July 26, 2017 at 2:42 pm

One thing I don’t like about using things like npm or webpack is that a font library, like font Awesome, really needs to go as high as possible in the lineup of head links so it has more time to load and be processed. Too many websites are starting to suffer from issues with automated css, font, and javscript link handling.

Matteo Cacciola · October 23, 2017 at 9:49 am

Hello. I m trying to follow your guidelines by compiling vuejs files with gulp. Unfortunately, I do not have a positive results, since I obtain the following error:
SyntaxError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’
Could you give me some hints about? Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Animation

Vue.JS: How To Animate Text using Transition and Clipping Path

How to use VueJS transition to create a Text Animation with Clipping Paths Click the toggle button to see what happeneds. See the Pen Text animation vue.js by Mattia Vorstenbosch (@iPrime) on CodePen. Slick animation Read more…