[Shane KParticipant]

I was looking around and did not see anything but is there a way in short code to change an icon’s color and size? I tried a few things but it did not work. This isn’t an icon list, it’s just a single icon on a text element.

[Josep Maria SParticipant]

Hi Shane,

icons are actually fonts, you can modify it with the same css rules as for fonts. To modify the size you can use “font-size”, to modify the color you can use “color”.

[icon style=”font-size:30px; color:blue;” type=”facebook-square”]

Hope it helps!

[Shane KParticipant]

Thank you very much that actually helps a lot 🙂

[ChristianModerator]

Thanks for helping out Shane, Josep.

[Jessica HParticipant]

I’m having trouble changing the icon color on my site. This is the code I’m working with:

[custom_headline class=”responsive-heading” type=”left” level=”h4″][icon type=”question-circle” style=”font-color:#eabe20;”] Frequently Asked Questions

The icon is currently the same color as the heading text, though I was trying to give it its own color.

[MrinalMember]

Hi Jessica,

Use the following:

[custom_headline class="responsive-heading" type="left" level="h4"][icon type="question-circle" style="color: #eabe20;"]

Hope this helps, Cheers!

[enrico.colacilloParticipant]

Hi guys, sorry but this command doesn’t seem to work for me :/
At this site: http://www.alchimiadellasalute.it/wordpress/domande-2/

And also this other your command seem not to work properly..
[icon type=”ellipsis-h” style=”font-size: 9px; color: orange; display:inline-block;vertical-align:middle;”]

I just added a text block and paste this code above into the text tab of Cornerstone.

What I do wrong? I am a beginner.. Thank you 😉

[RupokMember]

Hello There,

Thanks for writing in! Would you please clarify the issue a bit where you want to display this and what was the outcome? Also would you mind providing us your login credentials to have a closer look into the issue?

To do this, you can make a post with the following info:

– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[CherylwoodmanParticipant]

Hi – I am trying to adjust the size of the icons using the answer above, but when I use the style command, the icon changes to a cross. If I copy and paste the code above, I get the cross too.

Is this to do with the stack I am using? Ethos v1?

[ZeshanMember]

Hi there,

Thanks for writing in! To assist you with this, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you.

Thanks!

[pmarkham72Participant]

I have a question about the icon list element in cornerstone. Can I adjust the size of the icon only without adjusting the text associated with the icon? If this is not possible how do I make a simple bulleted list with an icon that is a different color than the font? Thanks in advance for any help.

[Rue NelModerator]

Hello There,

Thanks for updating the thread!

Yes you can adjust the size of the icon in the icon list element. Simply edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-ul-icons li [class*="x-icon-"] {
  font-size: 20px;
  color: #000; 
}

Feel free to change the color and the font size.
Hope this helps. Please let us know how it goes.

[mkrichmanParticipant]

I’m using icons that I am dragging in using the “icon” element, and I don’t see a way to change those. Inserting the above code doesn’t do anything, I assume because these icons are not in a list.

[RupokMember]

Hi there,

I am not sure why it’s not working for you as it’s a working example. See – http://prntscr.com/8qpycg

Please check it again and let us know.

Cheers!

[mkrichmanParticipant]

I’m not using them in a list, though. Here’s a screen shot.

[Author]

Posts