如何在计数器模块各区域下方添加Font Awesome图标？

Hey there! I get it—having that Font Awesome icon stuck next to the counter number looks totally messy. Let's rearrange things so the icon sits neatly below each counter's description instead. Here's how to do it step by step:

1. Restructure Your HTML for Better Control #

Instead of shoving everything into a single div, split the counter number, description, and icon into separate elements. This makes styling way easier:

<div class="sqs-col sqs-col-3 counter-value" data-count="300" data-desc="Donations">
  <span class="counter-number">0</span>
  <span class="counter-desc">Donations</span>
  <i class="fab fa-500px"></i>
</div>

We’re using <span>s for the number and description, then placing the icon directly below them inside the same container.

2. Add CSS to Align Everything Vertically #

Use flexbox to make the counter container stack its content top-to-bottom, centered horizontally. Add this to your stylesheet:

.counter-value {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers all content horizontally */
  text-align: center;
  padding: 1rem; /* Optional: Add breathing room around the counter */
}

.counter-number {
  font-size: 2.5rem; /* Adjust size to match your design */
  font-weight: 700;
}

.counter-desc {
  margin: 0.75rem 0; /* Adds space between number and description */
  font-size: 1rem;
}

.counter-value i {
  font-size: 1.75rem; /* Resize the icon as needed */
  color: #2c3e50; /* Customize the icon color to fit your theme */
}

This will ensure the icon sits cleanly below the description, not cramped next to the number.

3. Update Your Counter Script to Target the Right Element #

If your existing script was updating the entire counter-value div's text, it would overwrite your description and icon. We need to adjust it to only update the counter-number span:

var a = 0;
$(window).scroll(function() {
  var oTop = $('.counter-value').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
          countTo = $this.attr('data-count');
      
      $({ countNum: $this.find('.counter-number').text() }).animate({
        countNum: countTo
      }, {
        duration: 2000,
        easing: 'swing',
        step: function() {
          // Only update the number span, not the whole div
          $this.find('.counter-number').text(Math.floor(this.countNum));
        },
        complete: function() {
          $this.find('.counter-number').text(this.countNum);
        }
      });
    });
    a = 1;
  }
});

The key change here is using $this.find('.counter-number') instead of targeting the entire counter-value div when updating the text.

Why This Works #

Your original setup had all content (number, description, icon) as inline elements inside the div, so the browser rendered them side-by-side. By splitting into separate elements and using flexbox, we force vertical stacking, giving you the clean, organized layout you want.

内容的提问来源于stack exchange，提问作者J. Zar