Question

我正在使用Font Awesome创建一个JQuery滑动导航（参见：http://fortawesome.github.io/Font-Awesome/）

现在添加CSS，因为这是第三方Web字体图标我想知道如何使用+和 - 图标将其应用于我自己的代码。我之前使用过图像图标，但现在我打算将它与网络图标集成。

我的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小提琴链接：http://jsfiddle.net/SG7LZ/6/

有什么好帮手+解释吗？

请告诉我JSFiddle的解决方案，以便我可以检查代码和结果。

非常感谢！

Answer 1

您可以为主图标使用的font-size属性添加相同的样式，因此您的CSS将如下所示：

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

最后，我必须重写代码才能让图标切换工作。

在代码中，我在当前菜单图标$currIcon=$(this).find("span.the-btn > i")的变量中引用了一个引用，然后我更改了所有图标，但没有更改当前返回压缩状态（加号）。

现在在先前存储的元素$currIcon上使用toggleClass I siwtch加/减图标

演示：http://jsfiddle.net/npNXT/

Answer 2

只需使用fa-2x|fa-3x|fa-4x class

见这里的例子： font-awesome-examples

错误JQuery字体真棒图标

2 个答案: