DEV Community

loading...
Cover image for Font Awesome with VueJS 3

Font Awesome with VueJS 3

Sabbir Sobhani
Focusing
・1 min read

version 5

Font Awesome is a great tool for working with various of icons. It is the most popular and widely using icon toolkit. In a VueJS 3 CLI project you can easily add Font Awesome library by following these easy steps:

install fontawesome packeges from npm

install all of them

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/vue-fontawesome
Enter fullscreen mode Exit fullscreen mode

import in main.js

You can find main.js inside your vuejs 3 src project folder.

import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas);
import { fab } from '@fortawesome/free-brands-svg-icons';
library.add(fab);
import { far } from '@fortawesome/free-regular-svg-icons';
library.add(far);
import { dom } from "@fortawesome/fontawesome-svg-core";
dom.watch();

const app = createApp(App);

app.component("font-awesome-icon", FontAwesomeIcon);

// add necessary dependencies...

app.mount("#app");
Enter fullscreen mode Exit fullscreen mode

Thats it! now you can use font awesome icon in your VueJS 3 project!

<i class="fad fa-laugh-wink"></i>
Enter fullscreen mode Exit fullscreen mode

if there any problem popup, don't forget to ask me!

Discussion (0)