How do I change the colour of icons? I have 2 rows of 3 columns each (so 6 different icons I would like to change the colours of):
Hey Sheena,
What element are you using? The Classic Icon element has color options.
Please give us the URL of the page where you’ve added the icon.
Thanks.
Hi Christian, I used the shortcode as text, eg. [x_icon type=“keyboard-o”][x_icon type=“keyboard-o”]
My page is not live yet sorry.
The Icon element didn’t give me to change the size & alignment.
I see. In this case, you need to add a style attribute with this value.
color: hsl(0, 38%, 33%); background-color: hsl(0, 0%, 86%); font-size: 12px; width: 40px; height: 40px; line-height: 40px;
The whole code should look like this
[x_icon type="keyboard-o" style="color: hsl(0, 38%, 33%); background-color: hsl(0, 0%, 86%); font-size: 12px; width: 40px; height: 40px; line-height: 40px;"]
You can get or learn CSS color values here.
The font-size, width, height and line-height are just an added bonus. They’re are code generated from icon size and background size of Cornerstone.
Thanks.
Thanks very much!
How do I centre the image? When I change the font size to 120px the icon is right of centre:
Hi there,
I am sure you will understand that having only the screenshot is not going to help us at all. You either need to upload the website to a live server so we can see the code live and be able to use our Google Chrome Developer Toolbar to check the situation and try to help, or you need to make a Cornerstone Template of your page and share with us the CSL file.
Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.
Thank you for your understanding.
Thank you for the reply.
Changing the colour changed my alignment so I feel it is related.
But I can open up a new thread and I will make my page live.
That is weird. The color should not change the alignment. Please remove the 120px font size or add a larger width and height than your font size like 140px. If that does not help, we really need your URL.
Thanks.
It is very weird… changing to width & height didn’t change the size of the icon.
Here is my URL: https://diytravelhq.com/work-with-us/
Hi There,
That page returns the 404 page.
Could you please double check?
Thanks.
Sorry about that, it is working now, thanks
Hi There,
Please change the background color to white.
Then change the icon’s width to 130:
Let us know how it goes!
That works perfect, thanks!
You’re welcome! 
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.