Using Page Builders
Are you using Font Awesome with a page builder like Elementor, Divi, or Beaver Builder? Read on.
Our official Font Awesome WordPress plugin is designed to work primarily with the WordPress block editor.
It also supports using <i> tags and [icon] shortcodes anywhere on your site, including in content
created by other page builders.
However, your Pro icons might not seem to be available in other page builders depending on how they are built. Read on to understand why, and how you might be able to use your Pro icons in these builders.
Each Page Builder Does Its Own Thing
Other page builders may or may not support using the Font Awesome plugin. They may or may not support Font Awesome Pro, even if they support Font Awesome Free. If they support Font Awesome Pro, they may have their own way of configuring to use Font Awesome Pro in a way that’s unrelated to the Font Awesome WordPress plugin.
In short, when you’re using a different page builder, you’re using a different software product. It’s not just WordPress, nor is it just Font Awesome. It’s an integration of Font Awesome within that page builder product.
The question of whether that particular page builder supports the way you want to use Font Awesome is up to that creator of the page builder.
Font Awesome Pro and Page Builders
A common scenario is where you’re using a page builder that supports using Font Awesome Free. You may want to upgrade to Font Awesome Pro to get access to more icons and styles and use them within that page builder.
Will it work?
It depends on how that page builder works with Font Awesome, which is up to that page builder’s developers. Font Awesome provides tools and infrastructure, such as our GraphQL API and a CDN, which makes it easier for other software products to use Font Awesome Pro. Each page builder must use those tools (or something similar) to make it possible to use Font Awesome Pro within their builder.
If Your Builder Doesn’t Have Pro Icons…
Using Custom Code in Your Page Builder
Even if your page builder doesn’t support Font Awesome Pro, you may be able to use your Pro icons using custom HTML.
If your page builder allows you to add custom HTML, or a custom shortcode, you may be able to use the Font Awesome WordPress plugin to load your Pro Kit, and then add icons using <i> tags or [icon] shortcodes as custom HTML in the page builder.
The result might be that within the page builder editor, you won’t see an icon rendered, you might
just see the literal code, like <i class="fa-solid fa-gear"></i> or [icon name="gear" prefix="fas"].
But if your Kit is loading correctly, then it will render this code as icons when viewing the page
on the front end.
When Icon Choosers Are Missing Newer Icons
Sometimes a page builder will have an icon chooser user interface that shows only a limited list of icons that the page builder knows about. Maybe it only knows about Font Awesome Free icons. Maybe it knows about Font Awesome Pro icons, but only up to a certain version. So it’s missing newer icons, or maybe it’s missing entire styles of icons.
If you are able to load your Pro Kit on your WordPress site - either with the Font Awesome WordPress plugin or through the builder settings - your Pro icons will likely work, even if the builder tools don’t list all the icons.
If this seems like it fits your case, try the workaround above for adding custom code in the page builder. This may work, even if the page builder’s icon chooser doesn’t show all the Pro icons you have access to through your subscription.