想要添加"图标"在这段代码中

时间:2018-03-27 12:52:11

标签: css squarespace

我想知道是否有人知道如何添加" Font Awesome"这个"计数器"。

的每个部分下面的图标

这是&#34; Font Awesome&#34;代码:<i class="fab fa-500px"></i>

我尝试在

之间添加它

&#13;
&#13;
<div class="sqs-col sqs-col-3 counter-value" data-count="300" data-desc="Donations">0</div>
&#13;
&#13;
&#13;

但它只是在数字旁边显示,看起来很糟糕。

&#13;
&#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;
&#13;
&#13;

提前致谢!

1 个答案:

答案 0 :(得分:1)

尝试使用css,例如:

.element:before {
    content: "\f26e";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
}