[NEW PLUGIN] Use Font Awesome 6.4 Library the bubble way + Animations! (BB Code)

Allow your app to access the entire Font Awesome 6.4.0 Library (26,000+ Icons)! You can use the icons just as you would normally use font awesome icons in bubble with the bbCode tags . You can even specify the style of the icon and animate it for even more control over your app!

With a Pro License:

:white_check_mark: Access to 26,000+ Font Awesome Icons

:white_check_mark: Choose Icon Style
:art: Thin
:art: Light
:art: Regular
:art: Solid
:art: Duotone

:white_check_mark: All 8 Animation Options

:white_check_mark: All Font Awesome Brand Icons


Without a pro license (free):

:white_check_mark: Access to 2000+ Font Awesome Icons

:white_check_mark: Choose Icon Style For Select Icons
:art: Regular
:art: Solid

:white_check_mark: All 8 Animation Options

:white_check_mark: All Font Awesome Brand Icons


:link: Live Demo + Documentation
:link: Plugin Editor
:link: Plugin Page

Let us know what you think!

7 Likes

I installed the plugin but am a bit confused re: how to use different versions (non-pro) of an icon. For example, if I wanted to use the outlined star, what bb-code should I be using? On Font Awesome’s website I see it’s “fa-regular fa-star” but if I use that I still see a solid star. Exact code I’m using is:

[fa] fa-regular fa-star fa-fw [/fa]

The first argument of the BB code must not contain the ‘fa-’. I will update the documentation to reflect this!

Would you all like me to implement a version that serves the all of the icons including PRO? I will need to have a way to verify your license.

2 Likes

Just bought the plugin as needed Tiktok but it doesnt show. Block square with X through it.

Any tips?

I use icons for parent tool in database. Text form. Every other icon works, just not Tiktoks.

Tim

Any joy?

Hi, apologies for the late response! we are adding brands as we speak. Will update you when live.

Quick Update!

  1. We have added the font awesome brands library to the plugin.
  2. If you have a pro license you now have full access to all that font awesome has to offer including all 26,000+ icons, all 5 styles including duotone and more. Simply enter your api key in the plugin tab to authorize.

I hope you all enjoy.

2 Likes

Pro licence? for your plugin or FA?

The plugin now exposes a field in the Plugin tab that allows those with Pro Font Awesome Licenses to access the full Font Awesome Pro Library. If that field is set and the key returns a valid Pro License, all pro functionality will work!

Still getting the blocked out icons when re-adding the plugin to the app.

For example, Tiktok, Amazon, to name a few are blocked out with a cross in the middle.

Please send a picture of the text element on this thread

Also, You can refer to the documentation site to make sure the syntax is correct.

I’m a little confused on the required syntax. For example, I’d like to use two versions of the fa-eye-slash icon…one for regular and another for solid. I’m using the following bb code but they both show the standard eye

Regular: [fa] eye-slash fa-fw [/fa]
Solid: [fa] solid fa-eye-slash fa-fw [/fa]

They both show the same thing. I’ve tinkered with a few different variations of this but can’t seem to show anything but a solid version. Any ideas?

Bubble does something strange in which they default to solid, so those will both show the same thing. You will need [fa]regular fa-eye-slash[/fa]. I just confirmed it works without a Pro License.

@2706mason

I’m using in a text input, backend for a category so doesn’t need the [fa][/fa] in it.

But still, doesn’t work for me.

Anything I should be adding to the page etc for it to comply?

Can you please message me a link to your editor?

Nice ! thx ! but some icons get overridden by the default icons (or maybe other fa icons plugins…).

Example, it give this in the editor,

and this in live
image

while it’s this icon
image

and if i put the right synthax for your plugin (more like this: [fa]duotone fa-calendar fa-lg[/fa]) it’s still the same bug.
And this one works : [fa]duotone fa-calendar fa-lg[/fa]
But this one [fa] fa-calendar fa-lg[/fa] renders the calendar-day icon…

Don’t worry, i’ve tried everything too and gave up.