Elementor: FontAwesome 5

[parfilov]

This is the reopened suggestion of the https://github.com/pojome/elementor/issues/2750
Font Awesome updated to 5. When we'll see Viber and Facebook Messenger in widgets?

[black-eye]

+1 for Font Awesome 5 support

[MarnixBouhuis]

+1

[sam-suresh]

+1

[BenSibley]

+1

[HardeepAsrani]

With Gutenberg coming, a lot of block plugins are using Font Awesome which is making Elementor icons empty. If you use any plugin which has FA5, elementor icons disappear, so this should be given priority, or at least a better selector for .fa

[black-eye]

Yes please! This issue is a LONG overdue, considering FA5 was released in the end of 2017.

[eric-mathison]

This topic has been on the table for a while now and current themes are starting to break since Elementor still does not support FA 5. When can we expect this to be implemented? Do you recommend that I use Beaver Builder until you guys add FA 5?

[BenSibley]

Just a quick tip:

If a theme switches to FA5 and enqueues the FA stylesheet with the handle "font-awesome" this will cause the icons in the theme or Elementor to break because Elementor also uses "font-awesome" as the handle. Most themes use the "font-awesome" handle so that FA isn't loaded more than once, but if a theme wants to update to FA5 now, the simplest fix is to change the handle like this:

wp_enqueue_style( 'my-theme-font-awesome', get_template_directory_uri() . '/assets/font-awesome/css/all.min.css' );

Two versions of FontAwesome will get loaded, but it's better than breaking the icons completely in one or the other.

[johnfisherman]

wp_enqueue_style( 'my-theme-font-awesome', get_template_directory_uri() . '/assets/font-awesome/css/all.min.css' );

Two versions of FontAwesome will get loaded, but it's better than breaking the icons completely in one or the other.

Took this route and fixed it, thanks @BenSibley for sharing here. Not the prettiest solution, but will do while the Elementor team does not move to FA5.

[simonclay]

Some social icons are now becoming out of date in FA4. For example FA4 shows incorrect icon for houzz

[ewokee]

no progress no info for months? :/ sad to see

[onetrev]

Additionally, or maybe this is a new issue, but it would also be great if there was a way for users with PRO Font Awesome 5 license to be able to use those easily in Elementor and access all the icons we have access to.

[simonclay]

Additionally, or maybe this is a new issue, but it would also be great if there was a way for users with PRO Font Awesome 5 license to be able to use those easily in Elementor and access all the icons we have access to.

Yes, that would be a 'nice to have'

[acal]

Design elements use the old v4 FA icon calls. Eg. fa-smile-o no longer has an icon in v5.0. Just to keep in mind. Some other plugins try to load FA v5 adn it causes problems having the old FA calls in there.

[Luxamman]

+1
Any updates? Milestones?

[mrgarry043]

Jesus Christ... Just update to FA 5. I am done with Elementor for now

[thimfy]

Sorry but i am taking my star back till the elemantor not support FontAwesome 5.
With FontAwesome 5 all layout distorted

[flarewebdesign]

Font Awesome 5 really does need to be added, this is the only reason I can't update my theme because my theme has already updated to 5. Maybe it would be beneficial to create a barebone theme for Elementor Pro users, something that developers could actually edit too. This way if you are lagging behind in areas like this, the theme can follow your page builder updates.

Please add support. Thank you.

[hufer]

https://pafe.piotnet.com/#font-awesome-5 Piotnet Addons For Elementor Font Awesome 5 Feature can do it for you

[Deralict]

+1

[bloomerjj]

I think I did something similar to what BenSibley did. I added
add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' ); function enqueue_load_fa() { wp_enqueue_style( 'load-fa', 'https://use.fontawesome.com/releases/v5.6.3/css/all.css' ); } to my functions.php file and now I can get the lastest icons to load when I add them via HTML. So for the the Elementor Icon Box I didn't choose an icon from the icon drop down and instead added it like so <span style="font-size: 3em; color: Tomato;"> <i class="fas fa-igloo"></i> </span><br>This is the heading to the Title & Description field. If anyone know's how to get the icon drop down to load the new fonts, please advise. Thanks.

[eric-mathison]

Well its been 15 hours since someone last requested this and its tome for me to do the same again.
I've started using Font Awesome's new SVG + JS implementation so I can customize the icons more, but since it uses a script to find and replace icon references in the html, it breaks all previous Font Awesome 4 icons utterly making Elementor's icons useless.
Fixing outdated implementations should be a priority over releasing new stuff like themes...

[craigkc]

This seems like such an easy upgrade that hasn't happened in a year. It's frustrating that Elementor is such a nice editor, but for some unknown reason _really_ behind on this one. Compatibility with everything else is starting to be a real issue with me too.

[eric-mathison]

This seems like such an easy upgrade that hasn't happened in a year. It's frustrating that Elementor is such a nice editor, but for some unknown reason _really_ behind on this one. Compatibility with everything else is starting to be a real issue with me too.

I think what we really need is just a comment from the Elementor team on where their mindset is on this topic. If they are actively working on it or not. If not, why and what are the plans? I saw in the latest beta release they implemented new social icons. I'm not sure if they are just adding ver 4 icons still or not.

What we need is a switch in the settings. Either use v4 or v5. If you choose to use v5, the free icons (preferably using SVG + JS) are provided. If you are a pro subscriber, there is an input for your pro cdn url to override the free version. Also, you can provide a local copy using a child theme. The icons and social icons elements will need to be reworked to look for this setting (v4 or v5) but having this switch and defaulting to v4 will ensure existing plugins and sites don't break. Just my 2 cents.

[fdeross]

I just put in a feature request to use the Official Font Awesome plugin to add all of these features.

[craigkc]

Eric, I'm not a FA Pro user, but if I was I would definitely expect the functionality you describe. In fact, if they implement it, I'd be even more likely to go FA Pro. Your approach sounds right to me, and I too would just love to hear something.

Thanks fdeross for putting the request in. There have already been several from what I can see. I'll go find yours and follow it though.

[fdeross]

I know a lot of developers have been trying to figure out a way to use the latest Font Awesome icons (free & Pro) with Elementor. Well, the team at Font Awesome have developed an official Wordpress plugin that loads the latest FA version, uses their CDN to load icons, has the ability to load the Pro version, and has (or is supposed to have) the ability to override themes and plugins that use Font Awesome. I feel like this would be an easy solution that would offload some development onto the Font Awesome team while providing a lot more functionality to Elementor. The problem now when you activate the Font Awesome plugin it breaks Elementor. All of the icons disappear from the Elementor interface. Maybe I'm missing something or don't have the right combination of selections to make this work.

The git for the FA plugin is:
https://github.com/FortAwesome/wordpress-fontawesome

The link to the Wordpress plugin is:
https://wordpress.org/plugins/font-awesome/

[ChriKn]

This seems like such a basic thing... Glad I didn't jump into Elementor PRO for the moment... It would annoy me to hell

[thimfy]

Yeah we should not purchase Elementor PRo, with outdated things.

[Marette]

Please could someone from Elementor Pro give an update on when FA5 will be supported? Also noticed that Elementor Pro is no longer available for download on ThemeForest. ("Item removed by either staff or the author") What's up with that?

[acal]

Here's what I want :)

1) a configuration tick box to turn off the loading of FA 4 files entirely (at a minimum for temporary use a micro-plugin add on -- even raw code). We can then load our own FA files and thus use FA 5 with i tags in the standard HTML editor element and then manually place icons where the icon class value has changed since FA 5. While this is still annoying it at least provides an alternative for those that really really want FA 5 or need it. The following makes it less annoying...

2) A user defined field in the Elementor Icon element so that people can use the feature above and then type in FA 5 or other font library class names. The icon editor element ideally would work this way but perhaps with more limited features in this modality. Or a new "User Defined Icon" element can be designed that is specialized for this.

Pending official Elementor FA 5 transition the vendor should consider the above concepts so that obsolete FA 4 calls can be used with an FA 4 library. Or even better support the use of a user defined icon library and sprites.

Use case:
I know that WPDM plugin has options to turn off the css and js that it loads by default and Elementor made me use it. FA5 is one of these options that I could disable loading, thankfully. I first noticed issues when the FA5 from WPDM and the FA 4 from Elementor caused multiple rendering errors based on which icons now had obsolete FA class names. Those icons showed as broken rectangle icons. Thankfully, WPDM allowed me to disable FA 5.

Annoying that FA hadn't made their class names backward compatible 🤦‍♀️ . I am sure that Elementor, with the big WP 5 / Gutenberg push had a lot of worries. I do feel like they handled the transition really well. So thanks for that!

[hettbeans]

According to this post, it's confirmed they're working on it. This is the first such confirmation I've been able to find, so that's reassuring: https://wordpress.org/support/topic/problems-with-font-awesome-5-in-my-theme/#post-11063776

[calebweeks]

Hi everyone - this likely won't work for everybody, but the free Font Awesome Integration plugin actually fixed this issue for me when third-party plugins would load the "Font Awesome 5 Free" font. Perhaps it can help others.

Am still looking forward to the long-term, official Elementor fix as the team is able. 👍🏻 Really appreciate their work on the recent releases like the Popups, etc. so no complaints there (I am amazed at how quickly they introduce some super helpful features), but this particular pain point will be nice to have resolved without the need of the plugin listed above. Thanks, Elementor!

[OyeBenny]

Holy shit, I finally reach the bottom of this thread and they're STILL working on it? Didn't expect to see posts from 2 days to 3hours ago on here. I just need a way for Elementor to start using FA5.

I purchased it, downloaded it, and I don't know how to get Elementor to pick it up and recognize it when building pages and elements.

[hettbeans]

I solved this issue by downloading FA5 locally, and then importing the icons I wanted into a font pack on Fontello.com, then using the Custom Icons for Elementor addon to add that font pack to the Elementor icon library. Worked perfectly.

[Tvhawk]

+1 - this is still waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaay overdue.

[OyeBenny]

Maybe they'll implement it before Font Awesome 6 comes out.

Thank you for guiding me to the Custom Icons developer.

[neil-119]

Any updates on this? This is so important for us.

[mfauveau]

Any updates on this?

[KneePham]

*crickets

[parodev]

and?

[michaelpratt-swervepoint]

It appears that with the newest updates with popular themes like GeneratePress and Astra, the icons are no longer working...

Ouch.

Confirmed that the "Font Awesome Integration" plugin (search it) kind of fixes this issue, weird CSS artifacts. I can now see the icons but the way it shows up is all wrong now.

Edit: Just tried the official Font Awesome plugin, and it fixed the issues. Icons are different, but it is at least working, and the styling is actually holding across.

We should def have FA5 support by now, interesting that there isnt.

[Helmi]

Wonder if there's still any development. "Actively working on it" was like over a month ago. I'm not sure what actively means on that context - probably just that it's sitting somehwere on the todo list but I wonder if I should try to find a hacky solution for it or can expect for some proper support to be released within a recent time (like 4 more weeks?)

As the offiical fontawesome plugin loads FA5/pro quite well it would really be enough to be able to deactivate the default icons from Elementor and put FA5 in the dropdown instead.

[portrayaloflife]

We really should have updated icons by now, come on guys

[celestial]

Another request for Font Awesome 5 support. I'd rather have this before any more fancy new features are released. Support for FA Pro would be doubly appreciated.

[neil-119]

Wish we heard something from the Elementor team on this.

[EdwardBlack]

+1 for Font Awesome 5 support

[sureshkumargondi]

+1 for Font Awesome 5 support. And it supports, Font-display:swap; Property. It's very crucial for web speed optimization.

[laptrinhcomvn]

Whoops. Interesting. I hope supporting FA5 go out soon.

[ikovalyov]

No news for more then a year?

[haksxsx]

I actually read till the end still the update haven't rolled out in a year or so, Fount that fa plugin supports that but the styling is a lil off also not every icon loaded.
Would be great if elementor supports.

[p3k1n0]

Elementor Pro user here, joining the "pro-FA5 movement". Besides the needed updates on social media ones, I would REALLY like to use those new food icons in my food themed sites. I don't understand where's the big hurdle, why it's taking more than a year, without any real sign of progression.

[Tvhawk]

I don't understand either. It's just a few lines of code that FA even gives
out in their documentation AND it can even be implemented in such a way for
fa4 support to still be there for everyone who has fa4 code in their sites.

On Mon, Mar 25, 2019, 9:20 AM PK [e-mail] wrote:

Pro user here, joining the "pro-FA5 movement". Besides the needed updates
on social media ones, I would REALLY like to use those new food icons in my
food themed sites. I don't understand where's the big hurdle, why it's
taking more than a year, without any real sign of progression.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/elementor/elementor/issues/4430#issuecomment-476271492,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AL5vaD_i9QdxcMcN3ZpPfiYyW7aKpI5Uks5vaPcwgaJpZM4T8azV
.

[stevewoody82]

I would like Font Awesome 5 with the ability to add my license code for the Pro version in the integrations panel so that I can pull ALL icons into Elementor.

It would be a great time to revisit the icon preview screen and allow selection from Free / Pro / Brand filters that FA offer. (Check out Themeco. They absolutely nailed this process and you should consider their approach for this)

[hettbeans]

It's incredibly frustrating being so limited in my icon selection for custom HTML unless I'm willing to break the entire damn icon library for widgets. As a paying Pro user, it's even more frustrating given their absolute silence on this issue.

The Custom Icons for Elementor plugin is still a viable workaround, but only if you selectively load only a selection of icons into it based on what you need. If you just indiscriminately load the entire FA5 Pro library into it, the plugin becomes huge and can crash the dashboard. That's way too time consuming to do for every project, so not really a usable solution in the long-term.

[eric-mathison]

I'm beginning to think that Elementor 1. either doesn't care what we think, 2. doesn't care about font awesome, or 3. doesn't watch github. So I urge all of us Pro users to swamp their support tickets with requests to implement this. Hopefully they will get the point.

[stevewoody82]

It wouldn't be difficult to add the pro licence to the integrations tab and
then just hook the updated stylesheet to pull through the full icon suite.

It's so time consuming to use Fontello as a workaround and really should be
addressed to allow us more options.

https://onlinemastery.co.uk/plan?utm_source=Gmail&utm_medium=Email_Signature&utm_campaign=plan_your_website
[image: Website] http://onlinemastery.co.uk/ [image: Facebook]
https://www.facebook.com/OnlineMastery [image: Twitter]
https://twitter.com/onlinemasteryUK [image: LinkedIn]
Https://uk.linkedin.com/in/onlinemastery/ [image: YouTube]
https://www.youtube.com/user/onlinemasteryuk [image: PinInterest]
http://www.pinterest.com/onlinemasteryUK/ [image: Google+]
https://plus.google.com/+Online-mastery/

On Tue, 26 Mar 2019 at 22:36, Eric Mathison [e-mail]
wrote:

I'm beginning to think that Elementor 1. either doesn't care what we
think, 2. doesn't care about font awesome, or 3. doesn't watch github. So I
urge all of us Pro users to swamp their support tickets with requests to
implement this. Hopefully they will get the point.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/elementor/elementor/issues/4430#issuecomment-476879559,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE-9nlgsfc96y-bB5yBJf9xfXioR6bsgks5vaqDngaJpZM4T8azV
.

[jasonb4u]

I see this thread was made May 2018, its now 11 months later.

I'm pissed off they keep adding new features yet wont do something about using old stuff like Font Awesome v4 and get v5 happening !

Just like this video, adding NEW stuff but wont update the old stuff.

Time stands still for no-one and its been well over due for Elementor to pull out their fingers and GET THIS DONE !!!
Just released video: https://youtu.be/2WO-jAHNURA

[laptrinhcomvn]

Or you can move to icomoon solution. I think it is better than fontawesome. I required elementor to upgrade FA5 because it's conflict with theme FA5

[tristanleboss]

+1 but I'm realistic: they don't give a damm about their users feature requests... when they don't close the features request, they keep stacking up on this issue trackers and rot for years :(

It's a pitty because we all get frustrated (just read all the comments) but we are the one using their tool on a daily basis so we are the ones who know its limitation better than anyone else.

Because of all the features they don't want to implement, it's just impossible to create a website just in Elementor. We have to ressort to FontHello for the icons, we have to use CSS files for global styles because they don't want to implement styles presets, ... I had to fork Elementor-Pro just to convert the form redirect text field to an url one, ...

[barrychapman]

I am another pro user, and extremely disappointed in the lack of feedback from the team.

I have submitted a few support tickets, every single one of which went unanswered dating up to two weeks ago.

I am legit considering submitting a complaint with my credit card company since they wont honor any refund requests either.

Good luck everyone.

[barrychapman]

Anyone notice how elementor.com has mysteriously disappeared?

[jasonb4u]

They been done over for the last two days hacked so be it they all say on the FB threads
Image Snap: http://prntscr.com/n5c0lq

Image Snap: http://prntscr.com/n5c0t0

[parodev]

I don’t know where you guys talk about. It was up yesterday and so it is today. https://downforeveryoneorjustme.com/elementor.com

[Helmi]

guys this is not facebook chat here but github issues. can you just not discuss some random topics here? People have subscriptions on these threads to get updates on when something's happening on the topic.

[tristanleboss]

@Helmi Unfortunately, "something's happening on the topic" is a very very rare event :( At this speed, maybe when FA 6 will be released, they will start consider using FA5 :D

[dzmarc]

+1 for FA5. All of our themes use 5 and is a pain to go through and role back to 4. They did get their icon in the brands pack though so maybe hope?? https://fontawesome.com/icons/elementor?style=brands

[Antal72]

E Pro user here. +1 for implementing FontAwesome 5 (pro!) in Elementor.

[JanWed]

+1

[Jonathlee]

+1

[nerdtech]

Almost a year on and still only we can use fontawesome 4.7!!! Crazy since something like this can be surely added easily. +1

[ndstate]

What's the deal with this? I am a pro user and want to see the update.

[ppikachu]

Maybe you should ask for a charitable developer to do the work for you since the code is published here? Maybe reward him/her with a pro upgrade for the plugin?

[Jordidriesen]

Time to update this urgently! Not good that request from a big amount of request aren't heard. It's been bugging me for a while since I'm paying for a 'great' pagebuilder an this does not seem to be a big request regarding time and effort.

[ernilambar]

+1 Please update to Font Awesome 5.

[mlwilkerson]

I'm a developer at Font Awesome, working on our WordPress plugin (github, WP plugins directory), with an eye toward making it easy for other components like Elementor to integrate with Font Awesome while maximizing compatibility with other themes and plugins, and enabling Font Awesome Pro.

I'd love to connect with someone in development at Elementor about how we can make this happen.

I'd also be glad to collaborate with others in the community here who can help me understand how Elementor works with icons. It's a long shot, but maybe there's a way to use our existing plugin to get FA 5 Pro icons working in Elementor... In general, our plugin does support adding FA5 Pro, and it also resolves (some) conflicts when multiple versions of Font Awesome are enqueued.

[p3k1n0]

Hurrah for mlwilkerson :) !
@KingYes, @kobizz, @matipojo , @arielk , or some other Elementor developer, please come here and share with us your point of view. Can you help us (your user base) on this? I like the new motion effects in Elementor, but I had to install a third party plugin to put a simple icon in my page. Seems like there's a lack of balance in this.... but I could be wrong, so please, explain us where's the problem with this feature.

Also, after this post of mlwilkerson, seems like we have a possible third party solution that could be easier (on the short run) than implementing the feature in Elementor itsel. Could be a win win.

[zeinnicholas]

+1 Here! Thanks @mlwilkerson, let's make this happen!

[flarewebdesign]

@mlwilkerson, thanks for reaching out to Elementor. As you can see, we've been asking their team to add FA5 for quite a while! You're a lifesaver if you can make it through to them.

[shilo-ey]

@mlwilkerson commented on Apr 26, 2019, 6:49 PM GMT+3:

I'm a developer at Font Awesome, working on our WordPress plugin (github, WP plugins directory), with an eye toward making it easy for other components like Elementor to integrate with Font Awesome while maximizing compatibility with other themes and plugins, and enabling Font Awesome Pro.

I'd love to connect with someone in development at Elementor about how we can make this happen.

I'd also be glad to collaborate with others in the community here who can help me understand how Elementor works with icons. It's a long shot, but maybe there's a way to use our existing plugin to get FA 5 Pro icons working in Elementor... In general, our plugin does support adding FA5 Pro, and it also resolves (some) conflicts when multiple versions of Font Awesome are enqueued.

Hi @mlwilkerson

Thanks for reaching out.
Our integration is in the final steps of development and we are working on backward compatibility.

We will update this thread, as we do in all of the threads when we have any updates.

Stay tuned :)

[wpsumo]

+1

[tristanleboss]

1 full year to implement this! Better late than never....

[wpsumo]

@shilo-ey Please make it possible to select which icons that I want to be using and loading. This is a chance to optimize the font awesome and performance. To load icons I never use is unnecessary, and would take away the load from the rendering.

In settings, I would be able to thick which icons I want to use and load on the frontend. When I deactivate some icons they should be removed from being loaded in the frontend and not show up in the icon picker in the page builder.

And make fontawesome support https://developers.google.com/web/updates/2016/02/font-display for better font rendering performance.

[jasonb4u]

Is there any employed Elementor Developers here implementing this into the plugin, hows about some real updates on this!!!

[archergod]

Not sure why they are taking so long for this. If they want to keep backward compatability, they can give user option to select which library he wants to use, and make old version by default. So those who are making new site can switch to version 5 and use it. I am pretty sure it is not that hard ?

[Tvhawk]

@sumit - the sad thing is that Font Awesome actually allows you to be able
to concurrently run both versions at the same time.

They also systematically changed the icons in a way that a few simple
database search and replaced can run and the icons are all updated to
version 5.

At this rate Avada will have version 5 implemented just in time for version
6 to roll out.

On Thu, May 23, 2019, 1:30 AM Sumit Gupta [e-mail] wrote:

Not sure why they are taking so long for this. If they want to keep
backward compatability, they can give user option to select which library
he wants to use, and make old version by default. So those who are making
new site can switch to version 5 and use it. I am pretty sure it is not
that hard ?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/elementor/elementor/issues/4430?email_source=notifications&email_token=AC7G62GQKGPSKENJXSY3KFLPWZI3JA5CNFSM4E7RVTK2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWBO4GQ#issuecomment-495119898,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AC7G62CUIZQLXBQDFFFMEB3PWZI3JANCNFSM4E7RVTKQ
.

[archergod]

We don't necessarily need both libraries for a project, For most project it can be either, or they can enable both so user can use any.

Optimization can be done on this part later as well for both version support.

There are various option to enable a feature that people need now. I am currently force to use image because their icon are old and doesn't serve my purpose.

[gabacode]

The way I went around it is just by adding 'fa fa-bandcamp', inside the 'include' array inside "wp-content/plugins/elementor/includes/widgets/social-icons.php" line 101. FA5 is supported, just it's not implemented inside the social icons widget yet. Please update it into the next version! Cheers :)

[archergod]

@gaba41 The way you did will work until the next version update of Elementor. When Elementor release new version and your site update to it, then your changes will be gone and you have to do it again.

A better way can be you make a plugin and make your own Widget to add it.

[gabacode]

@archergod thanks for the heads up! Might have considered implementing a widget but it's just a small string I needed for the time being. Hopefully the next version of Elementor will ship with this added string tho!

[jotcreative]

+1 - and please allow us Font Awesome pro users to utilize the full icon set.

[alexannelap]

+1 !

[ewokee]

@mlwilkerson commented on Apr 26, 2019, 6:49 PM GMT+3:

I'm a developer at Font Awesome, working on our WordPress plugin (github, WP plugins directory), with an eye toward making it easy for other components like Elementor to integrate with Font Awesome while maximizing compatibility with other themes and plugins, and enabling Font Awesome Pro.
I'd love to connect with someone in development at Elementor about how we can make this happen.
I'd also be glad to collaborate with others in the community here who can help me understand how Elementor works with icons. It's a long shot, but maybe there's a way to use our existing plugin to get FA 5 Pro icons working in Elementor... In general, our plugin does support adding FA5 Pro, and it also resolves (some) conflicts when multiple versions of Font Awesome are enqueued.

Hi @mlwilkerson

Thanks for reaching out.
Our integration is in the final steps of development and we are working on backward compatibility.

We will update this thread, as we do in all of the threads when we have any updates.

Stay tuned :)

Stay tuned and still no single info. was this a calm down post for us "trolls" or what's the idea behind?

[jasonb4u]

This thread been going for 14 months now since 8th July 2019: https://prnt.sc/nz403e
Whats gonna happen when Xmas OR OR the 5G network!!!! just do nothing, no update, just sit around with old stuff!!! Some like to brag about RoadMaps and where they are headed in the future but cant update already old items where needing updates to keep up with whats new!!!

[flarewebdesign]

Follow the 2.6.0 milestone (Font Awesome 5 update included): https://github.com/elementor/elementor/milestone/49

[jasonb4u]

Ahhhhh, its finally here: https://github.com/elementor/elementor/issues/8431

[eric-mathison]

Ahhhhh, its finally here: #8431

I didn't see any mention to having the ability of adding pro icons as well. Has anyone tested the beta yet and can verify? @bainternet I'm assuming this will break the current fontello icons plugin available as well.

[tristanleboss]

@eric-mathison They answered me it will be an Elementor Pro feature. The current beta is for the Free version. I wonder how it will work because the Zip we download from FA website is not the same as the free version.

[eric-mathison]

@eric-mathison They answered me it will be an Elementor Pro feature. The current beta is for the Free version.

@tristanleboss Awesome, thanks for the reply! Pro version to use another pro feature, makes sense.

[mlwilkerson]

@tristanleboss @eric-mathison I'm keeping an eye on the Elementor beta and features. I've already played around with the (Free) Beta enough to figure out at least one (short term) way to get Font Awesome Pro icons in there. I've also sent some additional communication to the folks at Elementor with the hope of doing some coordination here to make it straightforward for Font Awesome Pro subscribers to use their Pro icons with Elementor.

(I'm a developer at Font Awesome, working on WordPress plugin and support.)

Again, I hope to make this much easier and require less manual customization in the future, but for now...

As of Elementor 2.6 Beta2, you can hook up Pro icons by adding something like this in your theme's functions.php file:

add_filter('elementor/icons_manager/native', function($params){
    return array_merge($params, [
        'fa-solid' => array_merge($params['fa-solid'], [
          'url' => 'https://pro.fontawesome.com/releases/v5.9.0/css/solid.css',
          'enqueue' => [
              'https://pro.fontawesome.com/releases/v5.9.0/css/fontawesome.css'
          ],
          'fetchJson' => 'http://example.com/wp-content/themes/mytheme/font-awesome-solid-pro.json',
        ])
    ]);
}, 10, 1);

(Note: I think the definition of that $params actually changed from Beta1 to Beta2, so watch out: things may still be in flux here until the release. I had to change it a bit from one beta version to the next.)

Two key parts of that code snippet:

(1)
The URL I'm using there for loading the solid style icon assets is from our Pro CDN. In order for that to work, you'd have to make sure and add your domain to your list of allowed CDN domains in your fontawesome.com account. Note: this Pro CDN service is being sunsetted, so while this is the easiest (and probably the most performant way to load the Pro icons right now), it's being replaced by Pro Kits.

I don't yet see a straightforward way to add a Pro Kit to Elementor, but that's what I hope to work out in time. I'm working on adding Kits support to the Font Awesome plugin. So even if Elementor doesn't decide to support Kits, there _might_ be a future way to load Pro Kits in Elementor by way of our plugin.

In the meantime, you'll be able to use self-hosting: downloading a zip file of the Pro assets from your fontawesome.com account and placing them in an appropriate directory on your WordPress site, and configuring that filter above to reference those assets URLs on your site. Or, as long as it remains available, the Pro CDN, as the code example shows above.

(2)
You'd need to create that http://example.com/wp-content/themes/mytheme/font-awesome-solid-pro.json file on your own (and put it in an appropriate place on your site, using a corresponding URL).

It's just a metadata file that lists all of the icon names available in that style and version.

This would override the default json file that lives at elementor/assets/lib/font-awesome/json/solid.json. The file should include all of the icon names for that style, in the version of Font Awesome you've specified in the filter above (5.9.0 in the example).

Currently, that solid.json file looks similar to this:

{
  "icons": [
    "ad",
    "address-book",
    "address-card",
    "adjust",
    "air-freshener",
    ...
  ]
}

So just add to it any of the solid style icon names from your Pro version that you like. Those you add here will be available in the icon library's icon chooser. You might find it easier to use the metadata we publish with each release. This is what that looks like for the current Font Awesome Free release:
https://github.com/FortAwesome/Font-Awesome/blob/master/metadata/icons.json

It has lots of stuff in it that you wouldn't need. You can see in that icons.json file that each key of the main object is an icon name. There is a corresponding metadata file in the Font-Awesome-Pro GitHub which Pro users can access if they've linked their GitHub accounts to their fontawesome.com accounts.

This is an example of overriding the _Solid_ style Font Awesome icons with the Pro version of your choice. Given the way Elementor has implemented Font Awesome 5 support so far, you'd need to repeat the same pattern for each style where you want to use Pro icons.

I haven't yet tried adding the Light style--not sure yet whether that will follow the same pattern as the existing styles, but it seems like it would.

[tristanleboss]

@mlwilkerson Thanks a lot for you detailled answer. If only the Elementor developers could behave like you, we would live in a perfect world. I hope they "talk" to you because they don't really listen to developers or power users. They focus on the average joe.

Anyway, on the positive side, they said on the Elementor Free 2.6 Beta thread that they plan to allow FA Pro use in the Elementor 2.6 Pro version. The Elementor Pro plugin has no public GitHub even for paying customers but I imagine you should be able to ask them for a free licence to check their implementation.

[shilo-ey]

This issue has been resolved in Elementor v2.6.0 (More features coming in Pro v2.6)

Feel free to update

Thanks!

[wpsumo]

@shilo-ey is the PRO kit working as explained in this article? Or how does the Elementor FA kit integration handle it?
https://blog.fontawesome.com/introducing-font-awesome-kits-7134d1d59959

With Free Kits you get:

• Speed up your website by serving your kits on our global CDN
• Handle all the caching of icons so we only download what doesn’t already exist in the browser
• The ability to always have the latest version and icons Font Awesome ships (along with options to use a certain version).
• Automatically take care of any icon accessibility concerns
• The latest, greatest web technologies — HTTP/2, SRI, etc.

Upgrade to Pro Kits and you get:

• More icons in all our styles.
• More kits which means more projects that can easily use Font Awesome.
• Duotone icons (coming very soon).
• Automatic Subsetting! Speed up your web sites by loading only the icons your site is using.
-

[mlwilkerson]

@alriksson is it your understanding that Elementor supports Font Awesome Kits?

When I last looked at a 2.6 beta, Elementor was achieving FA support _not_ via kits, but by other means. I hope to see kits support in Elementor in the future, but so far, it has looked as if they were shipping a static set of metadata (i.e. list of icons) and referencing a specific version of Font Awesome.

With kits, on the other hand, _you_ the developer or site owner would configure your kit to load the version and technology of Font Awesome you want (and get all of those optimizations).

I'm working toward a production release of our Font Awesome plugin that will support kits. It might be the case that when it's ready, it could be used to tie your Pro Kit into Elementor.

I'm also working on other non-plugin tools that Elementor will have the opportunity to use to improve your integration experience with Pro Kits.

In the mean time, I think using Pro Kits with Elementor may require some significant workarounds, unless I've overlooked something.

[Deralict]

@mlwilkerson Please post new of the new FA plugin release that supports Pro kits. I have implemented Pro kits already in my Elementor-based sites, and yes it does require some workarounds, so it would be nice to have a seamless implementation. Looking forward to it!

[wpsumo]

@mlwilkerson In the latest PRO version of Elementor I understand it like that consider they named the function to Fontawesome kits pro: https://elementor.com/blog/introducing-custom-icons/

See here: https://tppr.me/RtAXI that's why I'm wondering if it's the same kit you´re talking about?

Many thanks for the information it would be great to see, but I thought this was integrated consider the naming of the FA PRO sees in the above print and blogpost.

[eric-mathison]

@mlwilkerson While having capability with Kits would be great, I wouldn't limit it to that. Elementor will still need to have a 'self-hosted' option available. This is primarily due to the difference in plans. With Elementor Pro, you can license up to 1000 sites. With FA, you can only have 20 kits. There's a bit of disconnect here.

[mlwilkerson]

@alriksson OK, great. I hadn't see that yet. Yes, I assume that if they're asking for your Font Awesome Pro Kit ID, then they've add FA Pro kits support.

In my experience, working with lots of customers with Font Awesome on WordPress, there's still the bigger problem of resolving conflicts as other themes or plugins are added which may attempt to load their own conflicting versions of Font Awesome. I see it all the time. But that's admittedly not the primary concern of the present conversation.

@eric-mathison with our current Standard plan, true, 20 kit limit. However, that doesn't actually limit the number of sites you can use those kits on. That's really just the number of _distinct configurations_, which is what a kit is, essentially.

Regardless, I agree that the goal here is not _limiting_ Elementor's support of FA Pro to kits. There are probably always going to be reasonable use cases for all of the various ways to install Font Awesome, including self-hosting, or our non-kits Pro CDN.

In fact, my goal is in the other direction: to advocate for Font Awesome Pro customers being able to configure Font Awesome the way _they_ choose, and not to be limited or locked in to the way a given theme or plugin might happen to support. And as I mentioned above, beyond setup/installation (which is, actually, the easier task to accomplish), I want to see the WordPress ecosystem around Font Awesome improve the experience for site owners around those all-too-common conflicts where multiple themes and plugins try to load Font Awesome their own way, leaving site owners with a very confusing mess to untangle.

Again, it's great to see Elementor allowing users to add a FA Pro Kit ID.