How to add font Awesome to your Shopify store
Font Awesome is a font and icon toolkit based on CSS and LESS. If yoy want to setup Font Awesome on your Shopify store, please follow the steps below:
- From your Shopify admin, to to Online Store > Theme.
- Find the theme you want to edit and then click Action > Edit code.
- n the Layouts directory, click themes.liquid to open it in the online code editor.
- In the online code editor, add the below code before close </head> tag.1{{ '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' | stylesheet_tag }}
- Click Save and you are done.
Now, you can place Font Awesome icons just about anywhere using a style prefix and the icon’s name.
You need to know two bits of information to reference an icon.
- Its name, prefixed with fa-
- The style you want to use’s corresponding prefix.
1 | <i class="fa fa-camera"></i> <!-- this icon's 1) style prefix == fa and 2) icon name == camera --> |
You can see cheatsheet here.
Thank you so much for the tip!
Thank u so much
Super useful, clean and quick solution, Thanks!