Using Font Awesome in Vue3 with Bulma

user_7387269 0
Viewed 711

How should Font Awesome be used with Vue? I have vue-fontawesome added to my project, as well as Bulma, so am I supposed to intermix the two? Or choose one or the other? I would like to be able to use Bulma's classes for coloring the icons.

Vue-fontawesome shows using this syntax:

<font-awesome-icon icon="address-card" />

and Bulma shows using this syntax:

<span class="icon">
  <i class="fas fa-home"></i>
</span>

Questions:

  1. If I am supposed to intermix the two, how should the html syntax look?
  2. If I can only choose one or the other, what would be the limitations of each?
bulma font-awesome vuejs3 vue.js html
2 Answers

<font-awesome-icon> is just a convenience component. When you check your resulting HTML, you will find it renders <i class="fas fa-home"></i>.

The above statement is of course really simplified. In my projects I am using the SVG icons, so <font-awesome-icon> will render as <svg>...</svg>.

Bulma's HTML provides a container to put an arbitrary icon into it. That can be Font Awesome, but it can also be something else. It just provides the layout.

With that in mind, I would answer your questions:

  1. Just put the icon (Font Awesome) into the container (Bulma)
<span class="icon">
  <font-awesome-icon icon="address-card" />
</span>

To color the icon, Bulma's helpers work just fine:

<span class="icon has-text-danger">
  <font-awesome-icon icon="exclamation" />
</span>
  1. Does not apply, since both of them serve different purposes and complement each other.
user_29923230

Install Font Awesome package

npm install --save @fortawesome/fontawesome-free

Then load its CSS files

import '@fortawesome/fontawesome-free/css/all.min.css'

Example loading it globally

// Vue.js 3
import { createApp } from 'vue'
import App from './App.vue'
import "bulma/bulma.sass"
import '@fortawesome/fontawesome-free/css/all.min.css'

createApp(App).mount('#app')

Its is an Vue 3 example, but should work the same way on Vue 2 apps if the same steps are followed.

user_37886510
Related