Use Font Awesome in Shopify

von

Font Awesome can be a great extension to your Shopify Theme, but the installation without an App and according to GDPR (also known as DSGVO in Germany) is not as straightforward as it seems, but actually pretty simple.

Obviously, you need to modify the source code of your theme, but I promise, it will be minimal (Just one new line)

Download Font Awesome

Go to Font Awesome Downloads and get the files you need. It’s probably the free version for the web.

Add it to your theme

If you follow the official Font Awesome installation instruction, and add

{{ 'font-awesome/css/all.min.css' | asset_url |  stylesheet_tag }}

to you template, you will quickly realize, there is a problem with Shopify, and it’s CDN: The URL to your CSS files results in a 404, because Shopify can’t serve styles/fonts in subdirectories, but Font Awesome uses this structure:

Fix the file path

To make it work, you need to put all files in the root assets directory:

  1. Rename all.min.css to font-awesome.min.css and put it directly in assets
  2. Move all font files to assets
  3. Replace ../webfonts/fa- with fa- to fix all paths to the font files
  4. Embed it with {{ 'font-awesome/css/font-awesome.min.css' | asset_url | stylesheet_tag }}

Done

Now you can use it 

<i class="fa-solid fa-rocket"></i>

Schreibe einen Kommentar