Font Awesome usage in X?

[solarwoods]

I have used Font Awesome on hand coded websites so I’m familiar with Font Awesome. I’m trying to understand the unique X variation. I plan to use the Font Awesome icons in my topbar. Traditional Font Awesome code would be:

<i class=‘fa fa-file-alt fa-2x’></i>

From what I’ve read, I think the X usage would be:

<i class=“x-icon x-icon-file-alt” data-x-icon-s="&#xf15c;" aria-hidden=“true”></i>

What I don’t understand is what the data-x-icon-s field is for. I’ve been playing around on a page and it appears that the “x-icon-file-alt” isn’t even needed. It seems that the only thing that matters is that data-x-icon-s must be present and must have a correct 4 digit code from the Font Awesome cheatsheet. Is my understanding correct?

[nabeel]

Hey there,

Thanks for writing in! As of Font Awesome version 5 they split icons into multiple fonts.

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

The original attribute data-x-icon will still work for solid icons as a fallback but we’ve updated everything for consistency and rest of the usage is same as before. You’re also right about the 4 digit code from the FontAwesome cheatsheet however adjust data-x-icon according to the icons you’re using.

Hope this helps!