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

[AnInfiniteNumberofMonkeys]

+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?

[ecomm-michael]

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?