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:

Comparison between TanStack Start and Next.js — two modern full-stack React frameworks with different architectural approaches.

TanStack Start vs. Next.js: Choosing the right full-stack React framework

TanStack Start vs. Next.js: both are powerful full-stack React frameworks, but they take fundamentally different approaches to architecture, routing, and developer experience. This guide breaks down their core features from SSR and data fetching to TypeScript support and deployment, to help you choose the right tool for your next React project.

Abiola Farounbi
Jun 12, 2025 ⋅ 8 min read
Angular v20 might seem boring…here are 5 reasons it’s not

Angular v20 might seem boring — Here are 6 reasons it’s not

While it may seem like a maintenance update, Angular v20 is packed with practical, production-ready upgrades that will enable us to build apps faster and with more confidence.

Yan Sun
Jun 12, 2025 ⋅ 8 min read
vibe based ui building with google stitch

Vibe-based UI building with Google Stitch — Is this the future of frontend?

Build a responsive, multi-page e-commerce site with Stitch, Google’s new AI-powered UI design and development tool.

Emmanuel John
Jun 11, 2025 ⋅ 29 min read
Vercel-level deployment without Vercel-level prices

Get Vercel-level deployment without Vercel-level prices

Explore how to build and deploy a Next.js app to Cloudflare Workers to enjoy Vercel-like performance with more flexibility and lower costs.

Elijah Asaolu
Jun 11, 2025 ⋅ 5 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