Using font awesome icons in my markup

[simeoned]

Hi, am I missing something simple? I’m creating a bunch of list items in a text element (or raw content if I decide to do that instead) and I want to place 1 or 2 Font Awesome icons next to a select few. I would have thought that simply doing this would work out of the box:

<ul>
<li data-feature="Some Data">List Item <i class="fa fa-question-circle" aria-hidden="true"></i></li>
<li data-feature="Some Data">List Item <i class="fa fa-question-circle" aria-hidden="true"></i></li>
<li data-feature="Some Data">List Item <i class="fa fa-question-circle" aria-hidden="true"></i></li>
</ul> 

but nothing is happening at all. I also tried the newer syntax:
<i class="fas fa-question-circle"></i>

nothing there either. What am I doing wrong? Thanks in advance.

[rad]

Hi @simeoned,

Thanks for reaching out.

It’s different on our theme, it doesn’t use fas classes. You can do that by following this format

<i class="x-icon" data-x-icon-o="&#xf2b9;"></i>

Where data-x-icon-o means regular icon, and f2b9 is the icon code for this https://fontawesome.com/icons/address-book?style=regular (address book)

You can choose to any type :

data-x-icon-o for regular icons
data-x-icon-b for brand icons
data-x-icon-s for solid icons
data-x-icon-l for light icons

Just make sure the icon code you’re adding belongs to their corresponding type. Else, it will not work.

Thanks!

[simeoned]

Thanks @rad! Is there somewhere where this is documented? I went looking but could not find anything.

[ruenel]

Hello @simeoned,

You can check that out in our documentation guide:

• https://theme.co/docs/font-awesome-icon-issues#font-awesome-5-integration

Regards.