Icon next to items in sidebar

Support
#1

Hi there,

I have two types of sidebars - one like on this page https://thelanguagesherpa.com/russian-guide/ and another on this page https://thelanguagesherpa.com

I’ve been trying to get the ‘angle-double-down’ icon to appear to the right of items (at the moment just the word ‘Russian’) in the menu in these sidebars, just like I have in my header menu.

I can’t figure out how to do this though - do you know how I can do this?

Thank you,
LS

#2

Hello @riugn557,

Thanks for asking. :slight_smile:

You can add following CSS under Pro > Theme Options > CSS:

.widget_nav_menu .current-menu-item>a:after, .widget_nav_menu ul>li a:after{
content: "\f107" !important;
}

Thanks.

#3

Hi Prasant,

Unfortunately, it didn’t work - it just added a little square thing next to the word as you can see.

Also, do you know how I can make it so that changes affect all sidebars - the CSS you gave me only affected the second sidebar I listed in my first post, and not the second one…

Thank you!
LS

#4

Hi LS,

Please add this too:

 .widget_nav_menu ul>li a:after {
    content: "\f053";
    display: inline-block;
    margin-left: 0.45em;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Fontawesome is only working for current menu item. We need it to define it even if not current menu.
That is not page or widget specific. Should work on all menu widget. Please give us URL of menu widget where it was not working. Thank you.

#5

Hi Lely,

It’s now working on all the pages, so thank you.

Just one other thing: Can I make it a double downward arrow, just like I have for the menu items in my header bar?

Thank you,
LS

#6

Hi There,

Please update the given CSS code to this:

.widget_nav_menu .current-menu-item>a:after,
.widget_nav_menu ul>li a:after {
    content: "\f103" !important;
    display: inline-block;
    margin-left: 0.45em;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Hope it helps,
Cheers!

#7

Thank you, Friech!