Icon not showing up in Header correctly

Hey experts! For some reason, my envelope icon on my header is not showing up properly. It shows up as an empty box. I’ve tried re-writing the code, I’ve tried different icons, nothing works. It was fine one day and then the empty box the next day. As you can see the phone icon is fine.

Here’s the site: https://milesconstructioncolorado.com/

Here’s what it looks like:

And here’s the code:

I really appreciate the help. Thank you!

Hello @callyarndt,

Thanks for writing in!

Your code will no longer work. As of Font Awesome version 5.x, they split icons into multiple fonts. This can be fixed by changing instances of the data-x-icon attribute to one of the following:

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

Your code needs to be updated and use this instead:

<i class="x-icon x-icon-phone" data-x-icon-s="&#xf095;"></i> :&nbsp;
<a href="tel:719-395-8814">719-395-8814</a> &nbsp;
<i class="x-icon x-icon-envelope" data-x-icon-s="&#xf0e0;"></i> : <a href="mailto:[email protected]">[email protected]</a>

We would love to know if this has worked for you. Thank you.

This worked perfectly! Thank you so much for the help!

You are most welcome!

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