请求帮助：服务盒子悬停时同步修改文字与Font Awesome图标颜色

Hey Harvey, let's get that icon color matching your text on hover for your service boxes! The issue is almost certainly that your current CSS isn't targeting the Font Awesome icon element when the parent box is hovered—since you already have the text working, we just need to extend the selector to include the icon.

Here's how to fix it, depending on how you're implementing Font Awesome:

1. For traditional <i> tag icons (most common) #

If your service box HTML looks something like this:

<div class="service-box">
  <i class="fas fa-plumbing"></i>
  <h4 class="service-text">Boiler Servicing</h4>
</div>

Update your CSS to target both the text and the icon under the hover state:

/* Default state (optional, but good for consistency) */
.service-box .service-text,
.service-box .fas { /* Use .fa instead if you're using older Font Awesome versions */
  color: #444; /* Your default text/icon color */
  transition: color 0.3s ease; /* Adds a smooth fade effect */
}

/* Hover state - syncs text and icon color */
.service-box:hover .service-text,
.service-box:hover .fas {
  color: #e67e22; /* Replace with your desired hover color */
}

2. For Font Awesome SVG icons #

If you're using the newer SVG-based Font Awesome setup (loaded via their script), your icon will be an <svg> element with a class like fa-svg-inline--fa. Adjust the CSS to target that, and add fill since SVGs use fill for color:

.service-box:hover .service-text,
.service-box:hover .fa-svg-inline--fa {
  color: #e67e22;
  fill: #e67e22; /* Critical for SVG icon color */
  transition: color 0.3s ease, fill 0.3s ease;
}

Quick tip to find the right selector #

If you're unsure what class your icon uses:

• Right-click the icon on your page → Inspect (Chrome/Firefox)
• Look at the element's class attributes (e.g., fas fa-plumbing or fa-svg-inline--fa)
• Use that class in your hover selector alongside the text class

This will make both the text and icon change color simultaneously when the user hovers over the service box.

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