Where To Paste Code To Change FontAwesome Icon Size

Technical Q&A
1

Hello!

I’m on the paid Trademark theme, and I’ve successfully integrated Font Awesome into our site.

However, I see now way of changing the size of the icons.

I would like to adjust the icon size using code similar to this line:

*fa-2x*

CSS has never been my strong suit. As expected, changing values in the appropriate section yields no result. The only size I can change is the text size. Can anyone help?

Thanks in advance.

2

Hello @baronmingus ,

Please share:

  • your store URL;
  • page URL with the issue you mention;
  • storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

3

Hello, @diego_ezfy and thank you for your reply.

You may see the preview here. It is the black banner in the middle of the homepage and product pages with the icons.

4

@baronmingus , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
.fas{
    font-size: 40px !important;
    margin-bottom: 20px !important;
}

@media (max-width: 767px){
    .fas{
    font-size: 30px !important;
    margin-bottom: 20px !important;
}

}

You can change the values as per your wish:

40px = size desktop
30px = size mobile
20px = bottom spacing

Kind regards,
Diego

1 Like
5

That worked.

I placed the code at the end of the relevant section. These are Product Features, Recommendations , and so on; so they’re organized as such.

Also, some of the other icons in the site got out of whack; this is probably to be expected. I just went into theme.css to set things straight.

Thank you very much for your valuable contributions, @diego_ezfy .