字体真棒图标上的错误 JQuery答案

【问题标题】：Error JQuery on Font Awesome Icon字体真棒图标上的错误 JQuery
【发布时间】：2014-03-10 07:28:17
【问题描述】：

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

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

我的 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 上向我展示解决方案，以便我检查代码和结果。

非常感谢！

【问题讨论】：

标签： jquery css font-awesome

【解决方案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 plus/minus图标

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

【讨论】：

很好的解决方案。你能向我解释这部分代码吗？ var $currIcon=$(this).find("span.the-btn > i") $("span.the-btn > i").not($currIcon).addClass('fa-plus').removeClass ('fa-minus'); $currIcon.toggleClass('fa-minus fa-plus'); $(this).next().slideToggle(); $("#toggle > li > div").removeClass("active"); $(this).addClass('active'); });
好。我会尽快在答案中解释一下
好的，这部分是如何工作的？ var $currIcon=$(this).find("span.the-btn > i")
解释累了，查看答案；如果您需要更多信息，请告诉我

【解决方案2】：

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

请看这里的例子： font-awesome-examples

【讨论】：