Font Awesome icons not displaying properly in Shopify theme

Other Questions Shopify
1

I’m having trouble getting Font Awesome icons to show up in my Shopify theme. I’ve successfully implemented these icons in other web projects before, but they’re not working here.

I have all the required font files uploaded to my assets folder:

awesome-icons.eot
awesome-icons.svg
awesome-icons.ttf
awesome-icons.woff

My CSS file includes the font-face declaration like this:

@font-face {
  font-family: "AwesomeIcons";
  src: url('awesome-icons.eot');
  src: url('awesome-icons.eot?#iefix') format('eot'), 
    url('awesome-icons.woff') format('woff'), 
    url('awesome-icons.ttf') format('truetype'), 
    url('awesome-icons.svg#AwesomeIcons') format('svg');
      font-weight: normal;
      font-style: normal;
}

Other custom fonts work fine in my theme, but these icon fonts just won’t display. The icons appear as empty squares or missing characters. Has anyone encountered similar issues with icon fonts in Shopify? What could be causing this problem?

2

Check your CSS selectors too. Your asset URLs might be fine, but if you’re not applying the font-family correctly to your icon elements, they won’t show up. Make sure you’re targeting the right classes or pseudo-elements where the icons should appear. I’ve seen this tons of times - the @font-face loads perfectly but devs forget to actually assign the custom font to their icon selectors. Also check browser dev tools to see if the font files are loading without 404 errors. Sometimes there’s a mismatch between what you uploaded and what’s in your CSS. Those empty squares usually mean the font’s loading but can’t find the specific character codes you’re trying to display.

3

Check if you’ve got a legit Font Awesome license for commercial use. Shopify stores are commercial, so if you’re using Pro without proper licensing, the fonts won’t load right. I’ve had luck adding font-display: block; or font-display: swap; to your @font-face declaration - some icon fonts need that. Also check if your theme’s CSP headers are blocking the font resources. Premium themes sometimes have strict content security policies that mess with custom fonts. Quick test: switch to a default theme and see if the icons show up there.

4

Had this exact problem a few months ago - drove me nuts for hours! Shopify’s asset URLs are the culprit. You can’t use direct file references in CSS. Use Shopify’s asset_url filter instead:

@font-face {
  font-family: "AwesomeIcons";
  src: url('{{ "awesome-icons.eot" | asset_url }}');
  src: url('{{ "awesome-icons.eot" | asset_url }}?#iefix') format('eot'), 
    url('{{ "awesome-icons.woff" | asset_url }}') format('woff'), 
    url('{{ "awesome-icons.ttf" | asset_url }}') format('truetype'), 
    url('{{ "awesome-icons.svg" | asset_url }}#AwesomeIcons') format('svg');
}

Don’t forget the .liquid extension on your CSS file - otherwise Shopify won’t process the Liquid tags. This creates the proper CDN URLs Shopify needs. Your fonts are probably uploaded fine, the browser just can’t find them without this.

5

could be a cache issue - shopify’s cdn gets stubborn with font updates. add ?v=2 to the end of your asset urls to force a refresh. also make sure your font file names match exactly what’s in the css, including caps. shopify’s picky about that.