[alanjonesonlineParticipant]

Hi there

Is there any way I can select what icon appears next to the sidebar titles when I turn on ‘site icons’?

Any help is always much appreciated.

Cheers

[Paul RModerator]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. 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 with everything.

[alanjonesonlineParticipant]

No worries

http://Www.alanjonesonline.com

Thanks

[FriechModerator]

Hi There,

Yes, we can change that with a custom CSS, please tell us which sidebar title/s and which icon you want from here http://fontawesome.io/icons/

Thanks.

[alanjonesonlineParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing back! You can add this under Child Theme’s style.css :

.x-sidebar .h-widget {
	position: relative;
	display: inline-block;
}
.x-sidebar .h-widget::after {
	font-family: FontAwesome;
	position: absolute;
	right: -30px;
	top: 10px;
	font-size: 16px;
}
.x-sidebar #taxonomy_dropdown_widget-3 .h-widget::after {
	content: "\f02c";
}
.x-sidebar #nav_menu-49 .h-widget::after {
	content: "\f111";
}
.x-sidebar #nav_menu-51 .h-widget::after {
	content: "\f0a3";
}
.x-sidebar #text-97 .h-widget::after {
	content: "\f095";
}
.x-sidebar #text-99 .h-widget::after {
	content: "\f0c9";
}

Hope this helps.

Cheers!

[alanjonesonlineParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Please change the code to this.

body .x-sidebar .h-widget {
    position: relative;
    display: inline-block;
    padding-left:25px;
}
body .x-sidebar .h-widget::before {
    font-family: FontAwesome;
    position: absolute;
    left:0;
    top: 10px;
    font-size: 16px;
}
body .x-sidebar #taxonomy_dropdown_widget-3 .h-widget::before {
    content: "\f02c";
}
body .x-sidebar #nav_menu-49 .h-widget::before {
    content: "\f111";
}
body .x-sidebar #nav_menu-51 .h-widget::before {
    content: "\f0a3";
}
body .x-sidebar #text-97 .h-widget::before {
    content: "\f095";
}
body .x-sidebar #text-99 .h-widget::before {
    content: "\f0c9";
}

You need to add it in your child theme’s style.css file.

Hope that helps.

[alanjonesonlineParticipant]

Hi There

Thank you. Much appreciated.

There is just a few things now that need adjusting:

1. I want to change ‘phone’ to ‘phone-square’. Do you know the value for ‘phone-square’ please and I’ll swap it over.
2. Recent posts icon is missing. I would like for ‘bars’ to appear please.
3. The ‘tags’ icon appearing next to SEARCH sits too high. Is there a way I can lower only this icon? All the others are in the correct position.

Thanks very much for your assistance.

Cheers.

[Paul RModerator]

Hi,

1. Replace this

body .x-sidebar #text-97 .h-widget::before {
    content: "\f095";
}

to

body .x-sidebar #text-97 .h-widget::before {
    content: "\f098";
}

2. Add this in child theme’s style.css

body div#recent-posts-54:before {
    font-family: fontawesome;
    content: "\f0c9";
}

3. Add this in child theme’s style.css

body .x-sidebar #taxonomy_dropdown_widget-3 .h-widget::before {
    top: 12px;
}

Hope that helps.

[alanjonesonlineParticipant]

Hi there,

Thank you. That got it.

For the Recent Post missing icon I used this and it worked spot on.

body .x-sidebar #recent-posts-54 .h-widget::before {
content: “\f0c9”;
}

Thank you and your help is always much appreciated.

Cheers.

[RahulModerator]

We are glad to know that it helped you 🙂

Thanks for choosing X.

Cheers!

[Author]

Posts