Change icon size and icon label font size in Sydney FP: Services Type A widget

Hi,
Please could somebody help me with changing the icon size and the size of the title for each icon? I want to make them both larger.
Thanks

Hello there,

Thank you for reaching out to us here.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

/* Change icon size */
.roll-icon-box .icon {
   width: 100px;
   height: 100px;
   line-height: 120px;
}   

.roll-icon-box .icon i {
   font-size: 40px;   
}   

/* Change icon label size */
.roll-icon-box .content h3 {
   font-size: 25px;   
}   

You would do adjustment accordingly.

Regards,
Kharis

Oh, it works great, thank you so much!
Could you give me the CSS to do exactly the same thing for type B as well, please?

Hello there,

Thank you for updating me.

Please use the following code for type B:


/* Change icon size */
.roll-icon-list .icon {
   width: 100px;
   height: 100px;
   line-height: 120px;
}   

.roll-icon-list .icon i {
   font-size: 40px;   
}   

/* Change icon label size */
.roll-icon-list .content h3 {
   font-size: 25px;   
}   

Regards,
Kharis

It’s perfect! Thank you so much!

No problem. Just go easy on it.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Kharis

Thanks for the great advice. I copy and paste your code on custom tab > additional CSS. It works perfect!

However i was trying to follow your instruction to add these codes under my child theme’s style css sheet and it failed. wondering if i did something wrong. am i right to put all your codes after */ …in css sheet? or i should put inside that?

now i put the codes using the custom tab > additional css …works great. what if the parent theme update? will all these settings will be crashed and i need to redo? i changed the footer before when the theme update. all gone and i need to redo again.

Thanks for your help in advance

> However i was trying to follow your instruction to add these codes under my child theme’s style css sheet and it failed.

Please make sure that all of the code which resides there is error free. You can validate it using this tool: https://jigsaw.w3.org/css-validator/#validate_by_input

> what if the parent theme update? will all these settings will be crashed and i need to redo?

Please don’t touch any single line of code in the parent theme as all files will be overwritten once you updated it. To retain the changes on particular file like footer.php, you need to do in the child theme mode.

For more detailed information about child theming, please visit these links:

We have a premade child theme already, which might be a good starting point for you. It can be download from here: https://athemes.com/download/sydney-child-theme/

Regards,
Kharis

I tried using these instructions to change the size of my custom icons ( featured images); But the icons didn’t change. Only the font size changed. This is for Type A services.

Hello there,

To change the icon, edit a service from Dashboard > Services. Then use Font Awesome icon class name and replace the default one in the Service icon field.

Regards,
Kharis

Hello @kharisblank ,

I’m using custom icons (my own images). How would I adjust the following 2 things:

1/ The custom icon size

2/ The font size of the icon label (service label e.g. consulting)

Thanks.

Hello @kharisblank

i cannot change the icon size in Services Type A of Sydney Theme using the CSS Code you placed on the top.
both its box and the label changes accordingly but the icon itself (the fig at the center of the circle) doesn’t change at all!

Hello there,

Please try this code:

    .widget_sydney_services_type_a .roll-icon-box .icon i {
      font-size: 16px;
    } 

Regards,
Kharis

Hello @kharisblank

i tried the new code but
unfortunately there was no change at all,
attached is the screenshot of the result.Thanks

Hello there,

Try flushing any applied cache and then reload that page. If it doesn’t change anything, please share a link to that page here, so I can take a closer look.

Regards,
Kharis

Hi,How should i do that? Cache Flushing i mean?

kharisblank
January 12 |

Hello there,

Try flushing any applied cache and then reload that page. If it doesn’t change anything, please share a link to that page here, so I can take a closer look.

Regards,
Kharis

Visit Topic or reply to this email to respond.

In Reply To

dr.mahdi08
January 12 |

Hello @kharisblank i tried the new code but unfortunately there was no change at all, attached is the screenshot of the result.Thanks [image]
Visit Topic or reply to this email to respond.

To unsubscribe from these emails, click here.

Hello there,

I am sorry for the delay.

Please share a link of your site, so I can have a look.

Regards,
Kharis

Hi

Exactly what I was looking for apart from one thing:

  1. How to get rid of the thin border/circle around the icons on Type A/B widget?

Cheers

EDIT/UPDATE

I added border: 0px; and that sorted it… dunno if there’s a better/right method