Forum Academy Marketplace Showcase Pricing Features

Update Font Awesome Icons from V.4

Is Bubble going to ever update font awesome icons to a newer version?

Some icons in V6.1.2 in font awesome look good.

6 Likes

They really should. FA 6 is amazing.

I’m hoping either Bubble team updates this incredibly outdated plugin, or someone becomes the hero we need:

It will be amazing…

Yessss!! Would love if they do! When searching the font awesome library, it’s hard to know which ones you can code in to your text as some work and some don’t.

You can upgrade by adding the latest FA version to your page HTML header (you can get the header script here Get Font Awesome Free | Font Awesome)

image

In the editor -

And in run mode -
image

2 Likes

@tim12333 thanks for sharing this. I just attempted this and it works great for getting free icons in.

Have you attempted this after subscribing to a plan from font awesome for access to the Pro icons? Curious if they come through in the same way. My assumption is they would because you have to sign up to get the script required and it is attached to your font awesome account. Just wondering if you have experience with it or not.

As word of warning to somebody utilizing this. I put the script in my settings header and it worked there the same as if I had placed it in an html on a page. What I ended up noticing that my previous icons, some of them didn’t exist anymore in that on page preview I would see a rectangle with an X in it. In other situations where I had two icons change base on conditionals, if the conditional was met and the icon was not available the other icon was shown. Personally, I am not spending time at the moment to look through the icon list available through the script to see if the missing icons were under an ‘updated’ selection or were just removed

Yep I’ve noticed some of the icons do not work (the names of them have changed since v4)

As far as using pro icons, you could always do the text method where you insert [fa] fa-code [/fa] into a text box. The pro icons will have different endings like [fa] fa-code-pro [/fa] or something along those lines. (I think this will work, haven’t tried it)

2 Likes

Pro Icons show up when you view your site through a browser but you don’t see them when you are building. The exception being duotone which show up as regular icons, otherwise it is exactly the same. I also have the script in the settings header but I could just pop it in reusable elements like headers

1 Like

Just an update top this, I worked out how to get all the icon weights including duotone. you omit the first “fa-” so say the HTML in FA is
<class=“fa-duotone fa-megaphone”>
we put in [fa]duotone fa-megaphone[/fa]

1 Like

can i still use [fa] [/fa] with the new ones??? i use this all over my project currently and want to upgrade from the old font awesome…

bless

Yes but the names might be different.

For example [fa] fa-map [/fa] might be [fa] fa-map-pro [/fa] with the new icons loaded.