Using Icon Fonts with Icon Menu

[sonicpixel]

Hi there, first off thanks for the great theme!

I’d like to use Font Awesome icon fonts instead of uploading images for the Icon Menu.

I’ve found a site using Ikebana with Icon Fonts but I’m not sure how they did it. When I view source I see that they’ve added the font-awesome classes into the .icons-item div (screenshot: http://cl.ly/2d3f3W3M0w1N) but other than manually editing the files is there a way to add classes to the icon menu items?

Thanks very much.

[sonicpixel]

I think I’ve found the solution, I’ll post it here in case it helps anybody, I found just adding the classes in by jQuery worked great.

$("#icons-item-1").addClass("fa fa-3x fa-ticket");

[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

[satori]

Ah, I was late :) in any case, the solution above is purely CSS-based, which might be appealing to some.

Best,
A. / Satori Studio

[sonicpixel]

Thanks for the quick reply! I think I like your solution better :)

[Author]

Posts