Reply To: Using Icon Fonts with Icon Menu

[satori]

Hey Mike,

thank you for using Ikebana!

At the moment the icon menu does not imply using FontAwesome assets from the admin back-end, we will add this to our development backlog to implement in an upcoming version of the theme, since it sounds like a really nice feature. Meanwhile, you can add some custom CSS in order to achieve this: visit the “Style: Add Custom CSS” tab of the Theme Options panel and add the following code:

.icons-item { 
  background-image: none !important; 
}

#icons-item-1:before {
  content: "\f006";
}

.icons-item:before { 
  font-family: Fontawesome; 
  font-size: 30px; 
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 70px;
  text-align: center; 
}

Some explanations about this bit:

#icons-item-1:before {
  content: "\f006";
}

you will need to add one for each of the existing icon menu items, incrementing the “1” after the “#icons-menu” accordingly. The “\f006” is the html code for the icon, you can find them for each FontAwesome item by clicking the respective icon in the list and looking at small grey text below the icon sample images: the bit after the “Unicode” is what you need.

In case of any difficulties, do not hesitate to contact me!

Sincerely,
Andrii / Satori Studio