2022-06-16
4800
#vue
David Herron
336
Jun 16, 2022 ⋅ 17 min read

Font Awesome icons in Vue.js apps: A complete guide

David Herron Software engineer and author. Passionate about Node.js, climate change, EV’s, and clean energy.

Recent posts:

Why Go wasn’t the right choice for the TypeScript compiler

Why Go wasn’t the right choice for the TypeScript compiler

The switch to Go may be a pragmatic move in the short term, but it risks alienating the very developers who built the tools that made TypeScript indispensable in the first place.

Muhammed Ali
May 8, 2025 ⋅ 4 min read
how and when to use type casting in TypeScript

How and when to use type casting in TypeScript

Discover the basics and advanced use cases of type casting, how and why to use it to fix type mismatches, and gain some clarity on casting vs. assertion.

Paul Akinyemi
May 8, 2025 ⋅ 14 min read

How to format dates in JavaScript: Methods, libraries, and best practices

JavaScript date handling can be tough. Here are some native Date API tools and specialized libraries to tackle them with.

Nelson Michael
May 8, 2025 ⋅ 8 min read
tailwind typography

How to use the Tailwind Typography plugin

Walk you through how to set up and use the Tailwind Typography plugin, also known as the @tailwindcss/typography or the prose plugin.

David Omotayo
May 7, 2025 ⋅ 7 min read
View all posts

10 Replies to "Font Awesome icons in Vue.js apps: A complete guide"

  1. very nice!!, do you know how to use icons imported like that in vuetify components? like delimiter and prev/next buttons of carousel?

  2. Great and helpful read, just wish I read more before implementing the first way realizing it wouldn’t work for the purpose I needed it for.. thank you though.

  3. Great article, it really gave me some insight and helped getting me started. However I couldn’t get approach 004 to work the way you did in the example.

    Instead of the in in the App.vue, I added an import in main.js:

    import ‘@fortawesome/fontawesome-free/css/all.css’;

  4. How about when you want to have an icon inside of an input. There doesn’t seem to be a way to align it properly

  5. Very helpful, but not complete 😉 I’ve succeeded using the free solid library, but only in my views, NOT in my custom components, in there they don’t work anymore T-T do you have any idea how to fix that?

Leave a Reply