如何用CSS设置Font Awesome图标样式？移动端对齐及JSFiddle视图问题

Hey there! Let's work through your three issues one by one, with practical, actionable solutions:

1. Fixing Vertical Alignment of Font Awesome Dropdown Icon with Heading on Mobile #

The most common culprit here is default baseline alignment for inline elements. Here are two reliable fixes to match your design:

Flexbox Method (Cleanest & Most Maintainable) #

Wrap your heading and icon in a flex container, then use align-items: center to vertically center them perfectly:

<div class="header-group">
  <h3>Your Section Title</h3>
  <i class="fa-solid fa-angle-down"></i>
</div>

.header-group {
  display: flex;
  align-items: center;
  gap: 10px; /* Adjust spacing between title and icon to match your design */
}

/* Optional: Mobile-specific override if desktop styles interfere */
@media (max-width: 768px) {
  .header-group {
    align-items: center;
    /* Add any other mobile-only tweaks here */
  }
}

Inline-Block Method #

If flexbox isn't suitable for your layout, set both elements to inline-block and use vertical-align: middle to sync their vertical positions:

h3, .fa-angle-down {
  display: inline-block;
  vertical-align: middle;
}

This forces the icon and text to share the same vertical midline, fixing the misalignment.

2. Accessing Mobile View in JSFiddle #

Toggling mobile preview is straightforward:

• Look for the device toolbar icon (it looks like a smartphone next to a tablet) in the top-right corner of the JSFiddle editor. Click it to enable mobile view.
• Alternatively, use keyboard shortcuts: Ctrl+Shift+M (Windows/Linux) or Cmd+Shift+M (Mac) to quickly open the device toolbar.
• Once active, you can select pre-built device sizes (like iPhone 14, Samsung Galaxy) or input a custom width to match your target mobile screen.

3. Styling Font Awesome Icons with CSS #

Font Awesome icons behave like text (for font-based versions) or SVG elements (for modern SVG kits), so you can style them with standard CSS properties:

Basic Styles #

/* Change icon color */
.fa-angle-down {
  color: #2d3748;
}

/* Adjust size for font-based icons */
.fa-angle-down {
  font-size: 1.2rem;
}

/* Adjust size for SVG-based icons */
.fa-angle-down {
  width: 20px;
  height: 20px;
}

/* Add spacing from adjacent text */
.fa-angle-down {
  margin-left: 8px;
}

Advanced Interactive Styles #

.fa-angle-down {
  /* Add smooth transitions for hover/click effects */
  transition: all 0.3s ease;
}

/* Hover state */
.fa-angle-down:hover {
  color: #3182ce;
  transform: rotate(180deg);
}

/* Active (clicked) state */
.fa-angle-down:active {
  transform: scale(0.95);
}

For SVG-based Font Awesome, you can also target the fill property directly to change color—it works exactly like color for font-based icons.

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