PrimeVue 3 + FontAwesome in Menus

UI Components for Vue
Post Reply
jpavlovsky
Posts: 2
Joined: 19 Jun 2016, 10:25

09 Oct 2020, 16:28

Hi, did anyone here got FontAwesome to work in PrimeVue MenuModel?

Using the icon by itself like this works for me

Code: Select all

<font-awesome-icon icon="user-secret" />
But i can't get it to work inside an item in the MenuModel.

cagatay.civici
Prime
Posts: 18430
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

10 Oct 2020, 15:52

Should be with MenuModel only.

Code: Select all

 {
     label: 'Options', icon: 'fa fa-check'
}

jpavlovsky
Posts: 2
Joined: 19 Jun 2016, 10:25

12 Oct 2020, 08:20

Thank you,

for anyone else, that is just blind as me, there is a step required to make this work:
Processing i tags into svg using Font Awesome
A basic installation of Font Awesome has the ability to automatically transform <i class="fas fa-coffee"></i> into <svg class="...">...</svg> icons. This technology works with the browser's DOM, requestAnimationFrame, and MutationObserver.

When using the @fortawesome/fontawesome-svg-core package this behavior is disabled by default. This project uses that package so you will have to explicitly enable it like this:

Code: Select all

import { dom } from '@fortawesome/fontawesome-svg-core'

dom.watch() // This will kick of the initial replacement of i to svg tags and configure a MutationObserver

cagatay.civici
Prime
Posts: 18430
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

12 Oct 2020, 21:44

Thanks for sharing.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest