腳本中的圖標樣式？

下面是我的html，但我的興趣是在腳本中。我想風格的字體真棒圖標，即增加字體大小，對齊等。你可以在腳本內添加一個CSS元素？我故意孤立了我正在說的腳本，因此您不必查看整個代碼。代碼如下腳本中的圖標樣式？

<head> 
 
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
     
 
<script> 
 

 
$(function() { 
 
    $("#toggle-button").click(function() { 
 
      var i = $(this).find('i'); 
 
      if ($("#collapse").is(':visible')) { 
 
       i.removeClass('fa-angle-double-up').addClass('fa-angle-double-down'); 
 
       $("#collapse").slideUp(400); 
 
      } else { 
 
       i.removeClass('fa-angle-double-down').addClass('fa-angle-double-up'); 
 
       $("#collapse").slideDown(400); 
 
      } 
 
    }); 
 
}); 
 

 
</script> 
 

 
</head> 
 
<h2 style="font-family: times-new-roman; font-size: 33px; text-align: center; color:rgb(85,174,249)">BIOGRAPHY</h2> 
 
<div id="collapse" class="biography-box" style="display:none"> 
 
    <p>Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation"). 
 
    </p> 
 
</div> 
 
<button id="toggle-button" class="btn btn-info" style="color: black; background-color: transparent; border: none; font-color: black; width:778px" type="button"> 
 
    <i class="fa fa-angle-double-down"></i> 
 
</button>

來源

2017-10-10 Aron Tesfay

，爲什麼難道你不這樣做，在一個CSS文件，讓JavaScript的切換類作出選擇搭配呢？ – juvian

什麼，你到底想要做什麼？看起來你已經知道了'.addClass（）'？ –

它的中間部分，當然，你可以使用jquery.css功能如下：

$("#toggle-button").click(function() { 
    var i = $(this).find('i'); 
    if ($("#collapse").is(':visible')) { 
     i.removeClass('fa-angle-double-up').addClass('fa-angle-double-down').css('color', 'red'); 
     $("#collapse").slideUp(400); 
    } else { 
     i.removeClass('fa-angle-double-down').addClass('fa-angle-double-up'); 
     $("#collapse").slideDown(400); 
    } 
});

的.css（{ '色'：「紅'，'font-size'：'33px'}）//對於多個屬性

DOCS：http://api.jquery.com/css/

來源

2017-10-10 17:39:26

既然你只使用一個FA圖標，我知道你想要的風格，並通過腳本在頁面加載裝飾它，所以如果看起來不同和上口。所以這裏是我的解決方案

 $(function() { 
       $(document).find(".fa").css('color', 'red').addClass('fa-2x'); 
       // rest of the code as it is 

    }

來源

2017-10-10 17:48:59

你可以直接使用style來使用fa-2x，fa-3x，fa-4x，fa-5x來增加字體真棒圖標的字體大小，並且當你添加fa-角度雙倍下降和角度雙倍增加

<head> 
 
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script> 
 
      $(function() { 
 
    $("#toggle-button").click(function() { 
 
     var i = $(this).find('i'); 
 
     if ($("#collapse").is(':visible')) { 
 
      i.removeClass('fa-angle-double-up').addClass('fa-angle-double-down'); 
 
      $("#collapse").slideUp(400); 
 
     } else { 
 
      i.removeClass('fa-angle-double-down').addClass('fa-angle-double-up'); 
 
      $("#collapse").slideDown(400); 
 
     } 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
    <h2 style="font-family: times-new-roman; font-size: 33px; text-align: center; color:rgb(85,174,249)">BIOGRAPHY</h2> 
 
    <div id="collapse" class="biography-box" style="display:none"> 
 
     <p>Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation"). 
 
     </p> 
 
    </div> 
 
    <button id="toggle-button" class="btn btn-info" style="color: black;background-color: transparent;border: none;font-color: black;width: 100%;text-align: right;" type="button"> 
 
    <i class="fa fa-angle-double-down fa-2x"></i> 
 
    </button>

如果你想編輯CSS屬性

來源

2017-10-10 17:49:18

腳本中的圖標樣式？

回答

相關問題