Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Nick Frostbutter
Nick Frostbutter

Posted on • Originally published atfrostbutter.com on

     

Setup font awesome in Vue and NuxtJS

Setup font awesome in Vue and NuxtJS

If you have been living under a rock for several years and don't know, Fontawesome a wonderful icon library. It's open source, SVG based, and can be used on any website like utility classes.

Two different options to get awesome

Before the setups steps you should know, there are two ways to use Fontawesome icons in a Vue or Nuxt project:

  • "component" based icons
  • or utility "class" based icons

Both options work well, and are really just a matter of preference. But they have very similar setups, so I'll show both methods here.

With "component" based icons, you can add icons like this:

<font-awesome-icon:icon="['fas', 'user']"/>
Enter fullscreen modeExit fullscreen mode

With utility "class" based icons, you can icons like this

<iclass="fa fas fa-user"></i>
Enter fullscreen modeExit fullscreen mode

With Vue being a componentized framework, some people really love being able to use Fontawesome icons just like any other component. Personally, I do not.

I really like the utility class method. I find it easier, and I can use otherTailwind utility classes or regular CSS to style icons further when I want to.

Install the "fortawesome" packages

That's right. The package is actuallyfortawesome. Not fontawesome. Don't ask me why...

Using your favorite package manager, install thefortawesome dependencies.

npminstall @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
Enter fullscreen modeExit fullscreen mode

This will install the "core" package which you must add. As well as the "solid" icon pack. This will allow us to use the solid icons from Fontawesome.

If you want to add more icons into your project, then you can also install the "brands" and "regular" icon packs. (I end up using the same brand icons, likeTwitter and GitHub a lot.)

npminstall @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons
Enter fullscreen modeExit fullscreen mode

You can see the official NPM package here:@fortawesome/fontawesome-svg-core

Setup Fontawesome in Vue JS

If you are using a regular Vue JS project, then open up your _main.js _ project file, add add the following code to it:

/* Import all the font awesome goodness */import{library}from'@fortawesome/fontawesome-svg-core'// loads all the "solid" iconsimport{fas}from'@fortawesome/free-solid-svg-icons'// loads only the "twitter" brand icon// import { faTwitter } from '@fortawesome/free-brands-svg-icons'// add each of the imported icons into the applibrary.add(fas);// can be a list of all the icons e.g. (fas, fab, faTwitter, etc)// to use component based icons//import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'// to use class based iconsimport{dom}from'@fortawesome/fontawesome-svg-core'dom.watch();
Enter fullscreen modeExit fullscreen mode

Note: Specifically, you should add this code before you create your "app" object.

Here we are importing thelibrary object from thefortawesome core. The library will allow us to specify which icons we want to use in our project. More on

Next, I importfas from thesolid icon pack. This is how you import all of the solid icons from the solid icon pack. The same way works for the brand icons. To import all the brand icons, importfab from thebrand icon pack.

Make sense?

If you want to only use a specific icon in your project, you can import only the desired icons from the each icon pack. For example, to only import that twitter icon from the brand pack, use this line:

import { faTwitter } from '@fortawesome/free-brands-svg-icons'
Enter fullscreen modeExit fullscreen mode

Note: the icon names are written in Pascal case. (e.g. "faTwitter",not"fa-twitter")


After importing all the icons you want for your project, we add them to the library.

library.add(fas); // can be a list of all the icons e.g. (fas, fab, faTwitter, etc)// addd all solid icons and twitterlibrary.add(fas, faTwitter);
Enter fullscreen modeExit fullscreen mode

In theadd function, you can pass the list of all the icons you imported and want to use in your project.

To use component based icons:

Import theFontAwesomeIcon component on each of your.vue pages you want to use the component. This way, you can use font awesome icons like any other vue component. Like this:

<font-awesome-icon:icon="['fas', 'user']"/>
Enter fullscreen modeExit fullscreen mode

Just pass in an array into theicon prop. The first item in the array is the library you imported, the second item is the icon name itself.

To use the utility class icons:

We importdom from the fortawesome core. Thedom will allow us to use the utility class method of using the icons. thedom.watch() function is where the magic happens for Vue to enable the normal font awesome classes to work properly.

Using this way, you will be able to add fontawesome icons like regular html:

<iclass="fa fas fa-user"></i>
Enter fullscreen modeExit fullscreen mode

If you are going to use the component method for the icons, then you do not need to importdom or usedom.watch()

But like I said earlier, this is the method that IREALLY prefer. It seems cleaner.

Setup Fontawesome in NuxtJS

If you are trying to add Fontawesome icons into a Nuxt JS app, the setup is very similar. The only difference is that in order to actually tell Nuxt to use Fontawesome icons, you must create a plugin with the code from the section above, then load the plugin in yournuxt.config.js file.

Create the Fontawesome plugin

From inside your Nuxt app's root directory, create the new file~/plugins/fontawesome.js.

If you do not already have aplugins folder, just create it now 🙂

In the exact way I explained above, import and add all the Fortawesome icons you want to use in your project:

/* Import all the font awesome goodness */import{library,dom}from'@fortawesome/fontawesome-svg-core'import{fas}from'@fortawesome/free-solid-svg-icons'import{faTwitter}from'@fortawesome/free-brands-svg-icons'library.add(fas,faTwitter);dom.watch();
Enter fullscreen modeExit fullscreen mode

Save the code into your newfontawesome.js plugin file.

Add your new plugin into your "nuxt.config.js" file:

plugins:['~/plugins/fontawesome.js',],
Enter fullscreen modeExit fullscreen mode

All done. Reload your hot server, and give it a test. Enjoy the awesome that is Fontawesome!


This article onhow to setup font awesome in vue was originally by me,Nick Frostbutter, on my personal blog.

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Indie developer and maker
  • Joined

More fromNick Frostbutter

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp