在jquery中设置字体真棒图标

Set font awesome icon into jquery

本文关键字：图标 字体 设置 jquery      更新时间：2023-09-26

我正在讨论html、css3和jquery。我想在jquery中使用字体很棒的图标。但我不知道如何在Jquery中使用字体很棒的图标。

字体图标：

<i  class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>

代码：

<div class="display-icon">
     <i  class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
</div>

JQUERY代码：

$('.display-icon').click(function(){
-----FONT AWESOME ICON------
});

字体很棒的图标在html代码中工作良好。我想把这个图标设置到jquery代码中。

这里有一个解决方案，我建议使用<i id="myId">而不是"显示图标"的子级，更严格。。。

<html>
<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>
  <div class="display-icon">
    <i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
  </div>
</body>
<script>
    $('.display-icon').click(function() {
      $(this).children("i").attr("class", "fa fa-circle-o-notch fa-pulse fa-3x fa-fw ") ;
    });  
</script>
</html>

试试这个：

    $('.display-icon').click(function(){
    $("#show-icon").addClass('fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw ');
});

和：

    <div class="display-icon">
    click me :)
    <i  class="" id="show-icon"></i>
</div>

我希望这能解决您的问题：）

如果您想在单击按钮时添加微调器图标，您可以在HTML中的所需位置插入，并使用javascript（在您的情况下为jQuery）切换可见性：

<script>
$(document).ready(function(){
    $('#toggle-spinner').on('click', function(){
        $('#my-spinner').toggle();
    });
});
</script>
<input type="button" id="toggle-spinner" value="Toggle spinner"/>
<div id="my-spinner" class="display-icon" style="display: none"> <i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i> </div>

您还可以在DOM:中添加和删除HTML元素

$(' <div id="my-spinner" class="display-icon"> <i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i> </div> ').appendTo('body');
$('#my-spinner').remove();
相关文章：