Icons in main menu for Travelify WordPress theme

I would like to place a small icon for each menu entry in the menu bar. How can it be realized? I use a child theme which inherits from Travelify.

Thanks Lars

Our other themes such as Dazzling, Unite and Sparkling does support icons by default but this theme doesn’t have this kind of functionality.

Here is an example how you can add icons for Travelify theme:

  1. This theme does have genericons built it and you can see the entire library here.

  2. Once you have chosen icon you can add it like this via Appearance >> Theme Options >> Other >> Custom CSS.

li#menu-item-962 a:before {
  content: '\f202'; /* Icon code from genericons website */
  font-family: 'Genericons';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 3px;
  font-size: 14px;
  vertical-align: middle;
  text-align: center;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-transform: none;
  speak: none;
}
  1. Above I have added a comment for you to see which icon code you want to use. That code can be found on Genericons website.

Example above won’t do a thing because you need to find menu item ID that you want to target. You can do that by looking into your website source.

If there is no icon on Genericons library that you want to use then you will have to look for some plugin that uses Font Awesome icons or other font based icons.