Re: Dawn Theme | How to use custom icons in product text

JMecom · ‎02-02-2024

Here is an image of what I currently have, these icons that you can see are simple emoticons that i copy and pasted.

How do i change these icons to custom icons?
website: www.moxxishop.nl

thanks!

BSS-Commerce · ‎02-05-2024

You can reference icon texts at this website: https://coolsymbol.com/

Then, pick an icon, that you want and paste this on the product title. Hope it will be helpful for you @JMecom

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.

B2B Solution & Custom Pricing | Product Labels by BSS

Need help from our expert? Kindly share your request with us via community@bsscommerce.com

BSS Commerce - Full-service eCommerce Agency

WebDeskSolution · ‎02-06-2024

Hello @JMecom

Here’s a step-by-step guide on how to add Font Awesome (Fafa) icons to your Shopify theme:

1. Download Font Awesome: Go to the Font Awesome website and download the free version of the icons.

2. Upload the Font Awesome files to your Shopify store:

Go to your Shopify Admin panel.
Click on Online Store > Themes.

Find the theme you want to edit and then click Actions > Edit code.

Under the Assets directory, click Add a new asset.

Here, upload the Font Awesome files that you downloaded.

3. Link the Font Awesome CSS in your theme:

Go to the Layout directory and click on your theme.liquid file.
Add the following line of code in the <head> section of your theme.liquid file to link the Font Awesome CSS file:

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

4. Use the Font Awesome icons in your theme:

You can now use Font Awesome icons anywhere in your theme by using the <i> tag and the appropriate class for the icon you want to use. For example, if you want to use the fa-home icon, you would use the following code:

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

Please hit Like and Mark it as a Solution if you find our reply helpful.

Thank You,

WebDesk Solution Support Team
Get a Free Quote | Email | Shopify Partner | Shopify Development Agency | Call Us 877.536.3789

Location: 150 King St. W. Toronto, ON M5H 1J9

Otsche1g · ‎06-10-2024

Hi,

the guide doesnt work. The icons are not displayed for me, there is only a placeholder, the icons do not seem to be able to be loaded. Could it be that the path is incorrect? In font-awesome.min.css the fonts all have the path ‘../webfonts’

for example ‘../webfonts/v4compatibility.woff2’. I have tried everything to adjust the path, but the shop does not load it.

P.S. Is it enough to upload the .ttf and .woff2 files in assets? (the SVGs are not necessary?)

Re: Dawn Theme | How to use custom icons in product text

Dawn Theme | How to use custom icons in product text

Community Blog Articles