[atcoin1989Participant]

Hi,

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!

[atcoin1989Participant]

Update: I tried selecting the individual widgets using their div ids (so #text-9 and #text-10) but I wasn’t able to change the individual icons. Looks like the icon being used is from h4.h-widget so I can’t change one of them without changing the other.

Is there a way to get around this?

[Paul RModerator]

Hi,

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

[atcoin1989Participant]

This reply has been marked as private.

[Paul RModerator]

Hi,

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.

[atcoin1989Participant]

Hello again,

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.

[CousettMember]

Thanks for letting us know and we look forward to hearing from you when you figure it out. Let us know if we can be of further help.

[Matt BParticipant]

I’ve seen other themes add the ability to define an icon at the widget and menu levels – where you can choose to have the icon placed before or after the title or choose icon only. I’m not sure if there is a stand-alone plugin that does this without adding a bunch of bloat, so is this something that can be added in X?

[Rue NelModerator]

Hey there,

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!

[emariocParticipant]

Note: The Text Widget using in the case in my footer place a > icon however none of the other widgets have an icon preceeding the title of the widget.

[RupokMember]

Hi @emarioc

If you notice, it’s a thread from 2014. If you face any issue or need answer you can open a new thread describing your issue with proper information instead of bumping old thread.

Hope this makes sense.

[Author]

Posts