Font Awesome icon not showing in html

I’m trying to add a font awesome icon via html, but nothing is showing up. I’ve searched the forums, and I thought I found the answer, but it’s still not working for me. I am using the following code,

<i class="x-icon x-icon-bath" aria-hidden="true"></i>

Am I doing something wrong here?

I have another question to go with this. I finally figured out that I was missing the data-x-icon portion. So this works:

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

However, if I only plug the content above into a text box, it doesn’t show up after updating the page. In fact, that entire line of text disappears from the editor after updating. But if I include some text with it:

<i class="x-icon x-icon-lock" aria-hidden="true" data-x-icon="&#xf023;">test</i>

then it does work. How can I just show the icon without having to include any text?

Hi there,

I suggest that you use our shortcodes instead of adding them directly to HTML:

http://demo.theme.co/integrity-1/shortcodes/icons/

If you are in a PHP file you can use the do_shortcode function of Wordpress to add the shortcode.

Thank you.