Where To Paste Code To Change FontAwesome Icon Size

[baronmingus]

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:

<i class='fab fa-shopify fa-2x'>fa-2x</i><br/>

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.

[diego_ezfy]

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

[baronmingus]

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.

[diego_ezfy · Accepted solution]

@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

[baronmingus]

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 .