Customizing Icons in Services color and line weight of the circle around it

hello there,

            First of all I'm very poor in CSS.

I have been trying to customize my icons placed over services options provided in Sydney theme.with help of the support forums i had added the following code over the plugin Simple Custom CSS
and the code is here
.widget_sydney_services_type_a .icon i {
font-size: 36px;
padding-top: 30px;
}

.widget_sydney_services_type_a .roll-icon-box .icon {
width: 100px;
height: 100px;
}

and this made my icons look bigger and bolder and I need is to increase the line weight of the circle around the icon and to set different colors to each icon.
And the last one is I don’t have any space between the header and the first row inserted below the header.Some tricks make space between these two.
Thanks in Advance…

Hello there,

You can use this CSS code:


/* Circle border */
.widget_sydney_services_type_a .roll-icon-box .icon {
  border: 4px solid #fff000;
}

/* Icon color */ 
.widget_sydney_services_type_a .roll-icon-box .icon i {
  color: #fff000;  
}  


Regards,
Kharis