Skip to content

LearnCodingEasy/vue-fontawesome

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 

Repository files navigation

vue-fontawesome

In Folder Public File Index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

Use Normal Icon

<i class="fas fa-home fa-1x fa-fw"></i>

INSTALL

npm i --save @fortawesome/fontawesome-svg-core

Install For Vue Version 2

npm i --save @fortawesome/vue-fontawesome@latest

Install For Vue Version 3

npm i --save @fortawesome/vue-fontawesome@prerelease

Install For Solid Icon

npm i --save @fortawesome/free-solid-svg-icons

Install For Brand Icon

npm i --save @fortawesome/free-brands-svg-icons

Install For Regular Icon

npm i --save @fortawesome/free-regular-svg-icons

IMPORT

Import Font Awesome Icon

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

Import Library

import { library } from "@fortawesome/fontawesome-svg-core";

Import Solid Icon

import { fas } from "@fortawesome/free-solid-svg-icons";

Import Brands Icon

import { fab } from "@fortawesome/free-brands-svg-icons";";

Import Regular Icon

import { far } from "@fortawesome/free-regular-svg-icons";

USE

Use Solid

<fa icon="user" />
<fa :icon="['fas', 'user']"></fa>

Use Brands

<fa icon="font-awesome" />
<fa :icon="['fab', 'font-awesome']"></fa>

Use Regular

<fa icon="window-close" />
<fa icon="['far','window-close']"></fa>