我正在使用html,css3和jquery。我想在jquery中使用字体真棒图标。但我不知道如何在Jquery中使用字体真棒图标。
FONT ICON:
<p id="vivaTitle" title="">viva:title:
<input type="text" id="inputVivaTitle" value="">
<button onclick="elementeAbrufen()">send</button>
CODE:
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
JQUERY CODE:
<div class="display-icon">
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
</div>
字体真棒图标在html代码中正常工作。 我想将此图标设置为jquery代码。
答案 0 :(得分:4)
以下是一个解决方案,我建议使用<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>
答案 1 :(得分:1)
试试这个:
$('.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>
我希望这能解决你的问题:)
答案 2 :(得分:0)
如果要在单击按钮时添加微调器图标,可以在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();