创建带Font Awesome图标的响应式卡片：图标与文本未对齐问题排查

Let's fix that misalignment issue once and for all! The core problem with your current code is how the .icon element is positioned—it's using relative positioning which takes up space in the document flow and throws off the alignment with your text content. Here's how to adjust it:

Updated CSS Changes #

First, replace your existing .small-box .icon and .small-box .icon>i styles with these targeted fixes:

.small-box {
  /* Ensure the card acts as the positioning context for the icon */
  position: relative;
  overflow: hidden; /* Prevent icon from spilling outside the card's rounded corners */
}

.small-box .inner {
  /* Add right padding to keep text from overlapping the icon */
  padding-right: 80px;
}

.small-box .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  color: rgba(0, 0, 0, 0.15);
  z-index: 0;
}

.small-box .icon>i {
  font-size: 70px;
  transition: all 0.3s linear;
}

.small-box:hover .icon>i {
  font-size: 75px;
}

Key Fixes Explained #

• Absolute Positioning for Icon: By setting .icon to position: absolute, we take it out of the document flow so it doesn't interfere with the text layout. Anchoring it to the top-right corner with top and right values ensures it stays in a consistent, clean position.
• Overflow Hidden: Adding overflow: hidden to .small-box keeps the icon contained within the card's rounded borders, avoiding messy overflow.
• Padding Adjustment: The padding-right on .inner creates enough space between your text and the icon, so they don't overlap and stay visually aligned.
• Simplified Icon Styling: We removed the messy relative positioning (right: 15px, top: 15px) on the <i> element, relying instead on the parent .icon container for precise placement.

Full Updated CSS (Integrated with Original Styles) #

Here's the complete CSS with all fixes included:

body { font-family: 'Roboto', sans-serif; background-color: #44484c; }
.small-box { 
  border-radius: 0.25rem; 
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2); 
  display: block; 
  margin-bottom: 20px; 
  position: relative;
  overflow: hidden; /* New */
}
.small-box>.inner { 
  padding: 10px; 
  padding-right: 80px; /* New */
}
.small-box>.small-box-footer { background: rgba(0, 0, 0, 0.1); color: rgba(255, 255, 255, 0.8); display: block; padding: 3px 0; position: relative; text-align: center; text-decoration: none; z-index: 10; }
.small-box>.small-box-footer:hover { background: rgba(0, 0, 0, 0.15); color: #fff; }
.small-box h4 { font-size: 2.2rem; font-weight: 700; margin: 0 0 10px 0; padding: 0; white-space: nowrap; }
@media (min-width: 992px) { .col-lg-2 .small-box h4, .col-md-2 .small-box h4, .col-xl-2 .small-box h4 { font-size: 1.6rem; } .col-lg-3 .small-box h4, .col-md-3 .small-box h4, .col-xl-3 .small-box h4 { font-size: 1.6rem; } }
@media (min-width: 1200px) { .col-lg-2 .small-box h4, .col-md-2 .small-box h4, .col-xl-2 .small-box h4 { font-size: 2.2rem; } .col-lg-3 .small-box h4, .col-md-3 .small-box h4, .col-xl-3 .small-box h4 { font-size: 2.2rem; } }
.small-box p { font-size: 1rem; }
.small-box p>small { color: #f8f9fa; display: block; font-size: 0.9rem; margin-top: 5px; }
.small-box h4, .small-box p { z-index: 5; }
.small-box .icon { 
  color: rgba(0, 0, 0, 0.15); 
  z-index: 0;
  position: absolute; /* New */
  top: 10px; /* New */
  right: 10px; /* New */
}
.small-box .icon>i { 
  font-size: 70px; /* Adjusted */
  transition: all 0.3s linear; /* Kept */
}
.small-box:hover .icon>i { 
  font-size: 75px; /* Adjusted */
}
@media (max-width: 767.98px) { .small-box { text-align: center; } .small-box .icon { display: none; } .small-box p { font-size: 12px; } }
.small-box>.loading-img, .small-box>.overlay { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.small-box .overlay>.fa, .small-box .overlay>.fab, .small-box .overlay>.far, .small-box .overlay>.fas, .small-box .overlay>.glyphicon, .small-box .overlay>.ion { color: #343a40; }
.small-box .overlay { border-radius: 0.25rem; -ms-flex-align: center; align-items: center; background: rgba(255, 255, 255, 0.7); display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; z-index: 50; }
.small-box .overlay.dark>.fa, .small-box .overlay.dark>.fab, .small-box .overlay.dark>.far, .small-box .overlay.dark>.fas, .small-box .overlay.dark>.glyphicon, .small-box .overlay.dark>.ion { color: #343a40; }
.small-box .overlay.dark { background: rgba(0, 0, 0, 0.5); }

Why This Works #

Now your icon stays neatly anchored in the top-right corner of the card, your text has plenty of space to avoid overlapping, and the responsive "hide icon on small screens" behavior remains fully functional. The hover effect still works as expected, and the overall layout looks clean and aligned across all screen sizes.

内容的提问来源于stack exchange，提问作者Charles