[andrewjcampbellParticipant]

On my site I have several custom taxonomies – i’d like the ‘tag’ icon on the widget for each one to be different, it would be fine if they’re from the inbuilt collection – is this easy enough to do?

[andrewjcampbellParticipant]

Tag clouds are on the right here

http://www.massivesmall.com/submissions-database/

[John EzraMember]

Hi there,

Thanks for writing in. You can use CSS to change the “tag icons” type and color.

You can add this under Custom > CSS in the Customizer.

aside.x-sidebar.right div#tag_cloud-2 h4.h-widget:before {
    content:"\f0c9";
    color: #ff0000;
}

aside.x-sidebar.right div#tag_cloud-3 h4.h-widget:before {
    content:"\f1b3";
    color: #00ff00;
}

aside.x-sidebar.right div#tag_cloud-4 h4.h-widget:before {
    content:"\f013";
    color: #0000ff;
}

aside.x-sidebar.right div#tag_cloud-5 h4.h-widget:before {
    content:"\f074";
    color: #ff00ee;
}

aside.x-sidebar.right div#tag_cloud-6 h4.h-widget:before {
    content:"\f085";
    color: #00ffee;
}

You can change the content:”\f0c9″; to whatever code that corresponds to the icon of choice. You can find the code by right-clicking the icon and then > inspect element and look for under the before element to find the CSS that has the content code.

You can find the Icon Library here: http://fortawesome.github.io/Font-Awesome/icons/

You can also change the color by replacing the color: #ff0000; value.

Hope this helps!

[andrewjcampbellParticipant]

Awesome thanks,

Just to note in each icon’s page it shows its unicode

http://fortawesome.github.io/Font-Awesome/icon/database/

Saves using the inspect tool

[RubinKeymaster]

Glad everything works now! Feel free to open a new topic if you have any additional questions.

[Author]

Posts