Ad

Font Awesome Icons Weirdly Not Displaying In Shopify Store

- 1 answer

After spending hours going around in circles. I've reached a level of frustration where I need an outside perspective.

See this code here and how it produces exactly what should be expected.

<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<p class="fa fa-check-circle fa_custom"> Verified</p>

<i class="fa fa-check"></i>

Then if I enter this code within a Shopify liquid file.

enter image description here

The output is this:

enter image description here

Why isn't one of the icons showing?

I've made this demonstration to highlight my problem. I'm experiencing this with a few other font awesome icons as well. I'm designing pages in HTML / CSS in sublime. Then when I take this code into a Shopify store. The icons can't be seen. I've replicated this problem in multiple stores.

It's very strange. Can someone please help me.

Ad

Answer

You have the first icon inside a p-statement. Maybe one of your CSS-files is changing the font.

Tried this one?

    <i class="fa fa-check-circle fa_custom"></i> Verified <i class="fa fa-check"></i>
Ad
source: stackoverflow.com
Ad