How to easily add font awesome to your Vue CLI project in under 2 min.

How to easily add font awesome to your Vue CLI project in under 2 min.

In this post I will shortly show you how to easily add fontawesome to your Vue Cli project.

So basically we will just use a library called vue-cli-plugin-fontawesome.

Installation

If you haven't yet installed vue-cli 3, first follow the install instructions here: https://github.com/vuejs/vue-cli

Generate a project using vue-cli 3.0:

vue create my-app

To install the fontawesome plugin:

cd my-app
vue add fontawesome

Usage

The plugin is using the FontAwesome 5 vue-fontawesome component.

 <font-awesome-icon icon="user-secret"></font-awesome-icon>

How to add a Twitter icon to your App

if you want to use social icons like the one from twitter make sure to install the @fortawesome/free-brands-svg-icons

  1. import library
npm i --save @fortawesome/free-brands-svg-icons
  1. In the root folder of the project there should be a plugins/fontawesome.js file. Add following content to it:
import Vue from 'vue'

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

library.add(fas)
library.add(fab)

Vue.component('font-awesome-icon', FontAwesomeIcon)
  1. Now you can use the twitter icon like this:
<font-awesome-icon icon="['fab', 'twitter']" size="3x" />

Search for free icons

To search for free icons have a look here:

https://fontawesome.com/icons?d=gallery

Did you like it? Why don't you try also...

Build your own translator in Vue in 10 min.

Build your own translator in Vue in 10 min.

In this post I will show you how to easily build your own translator by using the Google translation API

How to fill a datetime input with MomentJS

How to fill a datetime input with MomentJS

In this post I will show you how to fill a datetime input with MomentJS

Easy straightforward example of reading data from a Firebase database with Vue

Easy straightforward example of reading data from a Firebase database with Vue

In this post I will show you a straightforward easy example on how to read data from a Firebase database.