Font Awesome Pro v5.5

Support
#1

Hi guys,

Could you please clarify something for me?

When I use the icon selector --for instance when adding a button in the header builder-- then I have solid, regular, light, and brand icons to choose from. So, it looks like we have access to the Font Awesome Pro icons.

However, when I add the HTML code for a pro icon such as <i class="fal fa-acorn"></i> in a php file of my child theme or in a Content Area element, then the icon does not appear.

How can I make this work? I’m probably doing something wrong. Could you please walk me through this?

Thank you,
Patrick

#2

Hey Patrick,

You don’t need the classes anymore. The update was detailed in our previous Release Notes.

There’s also this third party walk-through: https://youtu.be/BXoaWjmpllI

Here’s a walk-through to add a Font Awesome in the Classic Header: https://youtu.be/6AyXYQH4yBU

The updated HTML is this:

<i data-x-icon="&#xf3cd;" aria-hidden="true"></i>

Here are the modifiers for HTML

  • data-x-icon-b for social icons.
  • data-x-icon-o for outline icons.
  • data-x-icon-s for solid icons
  • data-x-icon-l for light icons

In case you’re be using the Icon shortcode in the content, the syntax is as follows:

  • l- for light [x_icon type="l-play"]
  • o- for regular [x_icon type"o-play"]
  • for solid and brands, just input the name [x_icon type="play"]

I see you’re using Pro though, here’s the walk-through to enable an icon in the Navigation elements: https://youtu.be/2UmSOxxuPSU

Hope that helps.

1 Like
#3

AWESOME! Thank you very much! This works like a charm! I really appreciate your detailed answer.

Let me please understand this, though. Replacing the Font Awesome class with data-x-icon is necessary because of how Font Awesome is implemented into X/Pro, correct? Also, it seems that this works without aria-hidden="true". Why is this part of the code recommended and what does it do?

Also, could you please show me how to add pro icons with CSS ::after pseudo-elements?

#4

Hi Patrick,

ARIA (Accessible Rich Internet Applications) defines a way to make Web content and Web applications more accessible to people with disabilities. You can read more information from here (https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden).

You can follow this example on how to use pseudo-elements (https://stackoverflow.com/a/18793584/1978139).

Hope that helps.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.