How to change the icon display size in the Service section of the frontpage?

[yitian Liu]

Can I change the icon display size in the Service section of the frontpage and how ? We want it to be smaller.

[themearile]

Hi Jay

Okay, Kindly add the below CSS in the Additional CSS box, please go to the Appearance => Customize => Additional CSS then paste the CSS here and click on to publish button.

.theme-services .service-content-thumbnail i.fa {
font-size: 5rem;
line-height: 2.2;
}

You can set the font size in the CSS as per the requirement.

Thanks

• This reply was modified 3 years, 1 month ago by themearile.

[yitian Liu]

Hi,

I got the smaller service icon with the above css you provided, but I still have a little problem with it, the black circle of the icon background does not go less, please advise the css which can change the background circle size according to the changing of the icon size.

Thank you so much!

[themearile]

Hi Jay

Okay, Kindly add the below CSS in the Additional CSS box, please go to the Appearance => Customize => Additional CSS then paste the CSS here and click on to publish button.

.theme-services .service-content-thumbnail i.fa {
background-color: transparent !important;
}
.theme-services .service-content:hover .service-content-thumbnail i.fa {
background-color: #fff !important;
}

Let us know if it works.

Thanks

[Author]

Posts