Dawn Theme | How to use custom icons in product text

Dawn Theme | How to use custom icons in product text

JMecom
Excursionist
15 0 5

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

 

JMecom_0-1706894131607.png

 

 

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

 

thanks!

 

Replies 3 (3)

BSS-Commerce
Shopify Expert
3477 463 526

Hi @JMecom ,

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 

view - 2024-02-06T093517.208.png

 

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
Shopify Partner
176 42 49

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
Tourist
10 0 0

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?)