How do I change the icon for individual widgets? Say I have 2 text widgets in my sidebar and I want to change the icon for one from the default chevron-right icon to the “map-marker” icon, and the other to the “phone” icon.

I searched for the answer to this question but couldn’t find an adequate one.

Thanks!

Is there a way to get around this?

We 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.

I can give you an example on how to change the icons but this is not accurate as we need to see your site first hand.
eg.

.widget_text .h-widget:before {
    content: "\f054";
}

Here is a list of icons with its content values.
http://astronautweb.co/snippet/font-awesome/

Hope that helps

Thanks for the html code.

Here is the code to change the icons in the order top to bottom.

#text-9 .x-icon.x-icon-map-marker{
     content: "\f054";
}

#text-9 .x-icon.x-icon-envelope-o {
     content: "\f054";
}

#text-10 .x-icon.x-icon-print {
     content: "\f054";
}

#text-10 .x-icon.x-icon-phone {
     content: "\f054";
}

Please change content to any icon you like.

Unfortunately, that didn’t work. I may have to dabble with modifying the reference CSS for the particular widget. Not quite sure how to do that but if I figure it out I will post an update with a solution here for future reference. I’m abandoning the pursuit for now.

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!