Add Font Awesome 5 Pro icons

There are two ways to enable Font Awesome 5 Pro icons in Beaver Builder:

Notes:

  • Beaver Builder Theme uses the Beaver Builder plugin to get the URLs for Font Awesome 5 icons, so these methods work for both plugin and theme.
  • To enable any Font Awesome Pro icon set in your layout, be sure to enable it at Settings > Beaver Builder > Icons:

Register your site with the Font Awesome 5 Pro CDN

Use the following procedure to register your site with the Font Awesome Pro CDN (Content Delivery Network). As an alternative, you can use IcoMoon or Fontello to create a web font from your Font Awesome Pro icons and upload that icon set to Beaver Builder. See the Related Articles for information about how to do that.

  1. Go to https://fontawesome.com/account/services and sign in.
  2. On the Services tab, add your site's URL as a Pro CDN domain.
  3. In your child theme's functions.php file, add the following filter:
    add_filter( 'fl_enable_fa5_pro', '__return_true' );

Note: If you register your service at the Font Awesome site and don't add the filter, or vice versa, neither the Pro nor the free icons will display. This is because the URLs for the free and Pro versions of the icons are different. For this reason, remember to change your site's Pro CDN registration if you migrate your site to another location, and remove the domain registration and the filter in your child theme if you stop subscribing to the Pro version.

Add a filter to load FA 5 Pro from a URL

If you have downloaded the Font Awesome 5 Pro icon set and unzipped it onto a server, you can add a filter to point to the server URL and path.

  1. In your child theme, open functions.php for editing.
  2. Append the following line to the file:
    add_filter( 'fl_get_fa5_url', function() { return 'HTTP://EXAMPLE.COM/PATH/all.css'; } );
  3. Replace HTTP://EXAMPLE.COM with the URL for your server, and replace PATH with the path to the all.css file in the Font Awesome 5 Pro folder.
  4. Save the file.