Using Icon Fonts with Icon Menu

Front page Support Forums Ikebana Theme Support Using Icon Fonts with Icon Menu

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  sonicpixel 1 year, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #7382

    sonicpixel
    Member

    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.

    #7383

    sonicpixel
    Member

    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");

    #7384

    satori
    Member

    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

    #7385

    satori
    Member

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

    Best,
    A. / Satori Studio

    #7386

    sonicpixel
    Member

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.