Why aren't the icons displaying correctly on my homepage?

[baronmingus]

Hello!

I've done some custom code on our client's Trademark theme. On our product pages, the icons in product-features.liquid display correctly.

However, when I imported the product-features.liquid file into the homepage, the icons did not display. No amount of padding adjustment seemed to work.

See attached images for reference.

Noob here. I'd love to know what I'm doing wrong. Thanks in advance!

[LitExtension]

Please send me the code of the file product-features.liquid . I will check it

[baronmingus]

I just sent you the message. Thank you very much for taking a crack at it.

[LitExtension · Accepted solution]

I checked and the code works just fine on product page with product metafields. If you want to display the icon on the homepage, you need to enter the Icon name for it.
Refer https://fontawesome.com/v5.15/icons?d=gallery&p=1
First icon you just need to enter "cog". 2nd icon you enter "bluetooth".
Hope it clear to you.

Font Awesome
https://fontawesome.com

[baronmingus]

Hello,

First, many thanks for verifying the product-features.liquid code.

My apologies; it is not clear to me where or in which file I should place the URL or the icon names.

The icons already exist in the schema in product-features.liquid, and are mentioned in settings_data.json.

Again, sorry for the noob questions. etting closer to a solution, however. 🙂

[baronmingus]

Okay, I figured it out.

To clarify, you are referring to theme.liquid, and the URL is to be placed right after the header:

<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" data-auto-replace-svg></script>

As a result, all icons show up on the homepage as well as the product pages.

If the moderators agree, I'm going to mark your previous post as the accepted solution.

Thank you for your efforts.