Help With Footer Icons

[freedomdesign]

Hi there,

I have the issue with icons in the footer of our site.

I’ve fixed this on other sites with data icons, but in this case I have the code:

<div class="footer_social_div">
<ul>
<li>
<a href="https://www.facebook.com/hakubaskiconcierge/" target="blank"><i class="fa fa-fw fa-facebook"></i></a>
</li>
<li>
<a href="https://plus.google.com/108698521516362673665" target="blank"><i class="fa fa-fw fa-google-plus"></i></a>
</li>
<li>
<a href="https://www.google.com/maps/place/Hakuba+Ski+Concierge/@36.684983,137.8261543,17z/data=!3m1!4b1!4m5!3m4!1s0x5ff7d1d8c4a1bd65:0x68cdcaf87f4a6f!8m2!3d36.684983!4d137.828343" target="blank"><i class="fa fa-fw fa-map-o"></i></a>
</li>
</ul>
</div>

All I see are dark outlined empty boxes for the first two, the google pin icon is fine.

I can probably drop the Google Plus one and change to Instagram

Thanks so much for your help!

https://hakubaskiconcierge.com/

[christian]

Hey @freedomdesign,

Please note that we do not have support for custom code. I’d recommend that you create a Global Block with those icons and replace your custom HTML with the global block. Please see the setup in this screencast: https://youtu.be/y96wj_k70Tk

If you wish to continue using your custom HTML, the icon’s HTML structure should be this:

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

For usage, please see this similar setup https://youtu.be/I4Nm5vPkJB4

Please remember that you will be responsible for coding, fixing and enhancing the styles of your custom HTML.

Hope that helps and thank you for understanding.