Using Font Awesome library in a Shopify store - font-face

Question

I'm trying to use Font Awesome:
http://fortawesome.github.com/Font-Awesome/
I've used these font icons on several Rails projects with no problem but for some reason when I try to use them in a Shopify store they don't get rendered.
I'm using another #font-face with no difficulties but for some reason this #font-face is not rendering.
In assets/ I have:
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
And I load them with #font-face just like I do with another font-face that works fine.
in my stylesheet.css which lives in assets/
#font-face {
font-family: "FontAwesome";
src: url('fontawesome-webfont.eot');
src: url('fontawesome-webfont.eot?#iefix') format('eot'),
url('fontawesome-webfont.woff') format('woff'),
url('fontawesome-webfont.ttf') format('truetype'),
url('fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}
But when I try to use the icons they can't seem to load. Any idea why this isn't working on Shopify? I feel like I'm missing something small but I can't figure it out.

Answer 1

The simplest solution is to attach this to header of theme.liquid
<!-- Font-Awesome ================================================== -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
No extra uploading. No installation. No hassle. Done.
Thank you MaxCDN :)

Answer 2

You will want to use the liquid asset URL helper in your CSS. More docs on the asset URL helper can be found here https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#asset_url

Answer 3

The posts here are a bit out-dated. I had to do a bit of troubleshooting still.
I went with the CDN approach and included a <link /> tag in my /layout/theme.liquid head:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
I got the CDN link from this website: https://cdnjs.com/libraries/font-awesome

Answer 4

You must remove #iefix and #FontAwesome in the #font-face code. Here's the correct code:
#font-face {
font-family: "FontAwesome";
src: url('fontawesome-webfont.eot');
src: url('fontawesome-webfont.eot?') format('eot'), url('fontawesome-webfont.woff') format('woff'), url('fontawesome-webfont.ttf') format('truetype'), url('fontawesome-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

Answer 5

theme.liquid
Before the head tag </head>
font-awesome.css
#font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot');
/* src: url('/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
*/ font-weight: normal;
font-style: normal;
{{ 'font-awesome'| stylesheet_tag }}
<script src="https://use.fontawesome.com/46b6d6c6a9.js"></script>
<script src="{{ 'fontawesome.min.js' | asset_url }}"></script>
</head>
any where into body section use the font icon
<div class="mb-2 col-2"> <span class="fa fa-reddit social"></span> </div>
<div class="mb-2 col-2"> <span class="fa fa-facebook social"></span> </div>