Error JQuery on Font Awesome Icon

Question

I am creating a JQuery sliding navigation using Font Awesome (SEE: http://fortawesome.github.io/Font-Awesome/)

Now upon adding CSS since this is a third party web fonts icons I wonder how can I apply it to my own code using the + and - icon. I used image icons before but now I am planning to integrate it with web icons.

my jQuery code is.

$("#toggle > li > div").click(function(){
    if(false == $(this).next().is(':visible')) {
        $('#toggle ul').slideUp();  
        $("span.minus-btn").removeClass('minus-btn');
    }
    $(this).next().slideToggle();
});

$("#toggle > li > div").click(function() {

         $("#toggle > li > div").removeClass("active");
         $(this).addClass('active');

if($(this).hasClass("active")){
       $("span.plus-btn", this).toggleClass('minus-btn');
         }
});

Now I am stock I don't even know how to fix the sizes of icons. Please help.

Here's the JQuery Fiddle Link: http://jsfiddle.net/SG7LZ/6/

Any great help + explanation please?

Please show me the solution on JSFiddle so that I can check on the code and results.

A big thanks!

Answer 1

You can add the same style to the font-size attribute used fot the main icons, so your css will look like:

span.plus-btn{
    float: right;
    font-size: 26px;
    height: 30px;
    width: 43px;
    margin-top: -34px;
    padding:0;
    color: #fff;
}

Finally I have to rewrite your code to let the icon toggle works.

In the code I take a reference in a variable of the current menu icon $currIcon=$(this).find("span.the-btn > i") then I change all the icons, but not the current back in the compressed state (plus).

Now using toggleClass I siwtch plus/minus icons on the previously stored element $currIcon

Demo: http://jsfiddle.net/npNXT/

Answer 2

just use fa-2x|fa-3x|fa-4x class

see here examples: font-awesome-examples