[GallardoooParticipant]

Hi, I would like to replace the double arrow that appears for nav dropdowns for a single arrow icon, something like this for example: http://fontawesome.io/icon/angle-down/ or this http://fontawesome.io/icon/chevron-down/

Could you please help me find way to do this?

Thank you

[LelyModerator]

Hello There,

Thanks for posting in.
Please add the following CSS on your child theme style.css:

.x-navbar .desktop .x-nav li>a>span:after {
    content: "\f107 ";
}

Or this:

.x-navbar .desktop .x-nav li>a>span:after {
    content: "\f078";
}

The customizer will remove the slash when you save that’s why it is recommended to add it style.css of your child theme.

[GallardoooParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

You can add the following CSS under Customizer > Custom > Global CSS:

.x-navbar .desktop .x-nav li>a>span:after {
    content: "\\f107 ";
}

Hope it helps 🙂

[GallardoooParticipant]

Hi Thai, I tried placing the code under custom > global css without the double dash (\\) and it worked 🙂 Should that be fine?

[Prasant RaiModerator]

Hello Gallardo,

Thanks for writing in!

Have you used single \? If you have used single \ then it’s fine. Your final code should look something like this:

.x-navbar .desktop .x-nav li>a>span:after {
    content: "\f107 ";
}

Thanks.

[Author]

Posts