Question

下面是我的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>

Answer 1

当然，您可以使用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（{＆＃39; color＆＃39;：＆＃39; red＆＃39;，＆＃39; font-size＆＃39;：＆＃39; 33px＆＃39;}）// for multiple特性

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

Answer 2

由于您只使用了一个图标，我知道您希望在页面加载时通过脚本对其进行样式和装饰，以便在出现不同和 引人注目的时。这是我的解决方案

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

    }

Answer 3

您可以直接使用样式来使用fa-2x，fa-3x，fa-4x，fa-5x来增加字体真棒图标的字体大小，还可以在添加时添加另一个样式fa-angle-double-down和fa-angle-double-up

   <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>

脚本内的样式图标？

3 个答案: