Удивительный шрифт с ошибкой скользящего кода JQuery

Я создавал скользящую навигацию JQuery, используя Font Awesome (SEE: http://fortawesome.github.io/Font-Awesome/)

Теперь, добавив CSS, поскольку это значки сторонних веб-шрифтов, мне интересно, как я могу применить их к своему собственному коду с помощью значка + и -.

+ -> <i class="fa fa-plus"></i> fa-plus

- -> <i class="fa fa-minus"></i> fa-minus

мой код jQuery.

$("#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');
         }
});

Теперь я фондовый, я даже не знаю, как исправить размеры значков. Пожалуйста помоги.

Здесь ссылка JQuery Fiddle: http://jsfiddle.net/SG7LZ/6/

Любая большая помощь + объяснение, пожалуйста?

Пожалуйста, покажите мне решение на JSFiddle, чтобы я мог проверить код и результаты.

Большое спасибо!