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 2 (2)

BSS-Commerce
Shopify Expert
3477 460 516

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 or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

WebDeskSolution
Shopify Partner
165 42 47

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 | Hire Us | Call Us 877.536.3789


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