Font awesome in top header

Hi there,

I´m using pro.
I try to put some font awesomes in the top header. It works with the icon phone, you see the icon. But with the icon envelope it doesn´t work. You see only a square.

Here is my code:

Büro Bremerhaven: <i class="x-icon" data-x-icon-s="&#xf095;" aria-hidden="true"></i> <a href="tel:+49471926xxx">0471 926 xxx</a> | Büro Bremen: <i class="x-icon" data-x-icon-s="&#xf095;" aria-hidden="true"></i> <a href="tel:+494213039xxx">0421 30 39 xxx</a> | <i class="x-icon" data-x-icon-s="&#xf003;" aria-hidden="true"></i> <a href="mailto:xxx@gralle.de">xxx@gralle.de</a>

Thanks for your help and best regards
Kerstin

Hi @praxisnah2016,

Thanks for reaching out.

Please change this icon code &#xf003; from your HTML code to this, &#xf0e0;. This is the reference for that :slight_smile:

https://fontawesome.com/icons/envelope?style=solid

Hope this helps.

Cheers!

Thanks so muchm, it worked out!
But how can I change the size, means make it bigger, with these “new system”?
Best regards Kerstin

Hi Kerstin,

Glad it worked, as for font size, you can directly apply it to the icon. Example

<i class="x-icon" data-x-icon-s="&#xf0e0" aria-hidden="true" style="font-size: 16px;"></i>

Hope this helps.