我想知道是否有人知道如何添加" Font Awesome"这个"计数器"。
的每个部分下面的图标这是&#34; Font Awesome&#34;代码:<i class="fab fa-500px"></i>
我尝试在
之间添加它
<div class="sqs-col sqs-col-3 counter-value" data-count="300" data-desc="Donations">0</div>
&#13;
但它只是在数字旁边显示,看起来很糟糕。
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var a = 0;
$(window).scroll(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
a = 1;
}
});
</script>
<div id="counter">
<div class="sqs-col sqs-col-3 counter-value" data-count="300" data-desc="Donations">0</div>
<div class="sqs-col sqs-col-3 counter-value" data-count="400" data-desc="Projects">0</div>
<div class="sqs-col sqs-col-3 counter-value" data-count="1500" data-desc="Countries">0</div>
<div class="sqs-col sqs-col-3 counter-value" data-count="300" data-desc="Collected">0</div>
</div>
<style>
.counter-value {
font-size: 60px;
line-height:2em;
text-align:center;
padding:17px 0;
}
.counter-value:after {
content: attr(data-desc);
display:block;
text-transform:uppercase;
font-size: 14px;
line-height:1.2em;
}
</style>
&#13;
提前致谢!
答案 0 :(得分:1)
尝试使用css,例如:
.element:before {
content: "\f26e";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
}