Docs

[ichibanj]

Hi, I would like to have all items appearing in a sidebar widget (that shows a custom menu) to have Font Awesome icons next to them. Not the widget title, but the items in the menu itself.

So for the full list of icons in the sidebar here I would like each one to have it’s own font awesome icon http://www.highwaycodetest.co.uk/road-traffic-signs/

Is this possible?

[Lely]

Hi There,

Thanks for posting in and giving us your site URL. What you want to achieve is possible using custom CSS. PLease add the following in Appearance > Customize > Custom > Custom CSS:

.widget_nav_menu ul li a:after {
    line-height: 1;
    text-decoration: inherit;
    opacity: 0.35;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-left: 10px;
}
/* Below are the icons for the first two links Change this  "\f021" and this "\f021" to your preferred icons */
.widget_nav_menu ul li#menu-item-1796 a:after {
    content: "\f021";
}
.widget_nav_menu ul li#menu-item-1798 a:after {
    content: "\f024";
}

Check this link: https://astronautweb.co/snippet/font-awesome/ for corresponding content values for each FONTAWESOME ICON.

Then as you add icon for other links, repeat the entire declaration and just replace #menu-item-1796 with current menu link ID and content values for your preferred fontawesome icon. To get those ID, please check this video screencast:http://screencast-o-matic.com/watch/cDfThT1mLb

Hope this helps.

[ichibanj]

Thanks for this very helpful and accurate response. It worked perfectly, but also the video was especially useful so I could see where to find the details and confirm I was on the right track.

I used a:before instead of a:after and this meant that the Fontawesome icon automatically replaced the bullet which is what I was after.

[Darshana]

Glad we were able to help 🙂

[Author]

Posts