Font Awesome图标旁span文本莫名大写，text-transform:none无效求助

我尝试在Font Awesome信封图标后显示邮箱地址，但邮箱地址莫名以全大写形式展示，并未手动设置该样式。已对所有相关元素及标签通过内联样式和CSS设置了text-transform:none，尝试多种方案耗时约一小时，问题仍存在。

现有代码 #

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  width: 100%;
  padding: 0 20px;
  background-color: #cda349;
  position: relative;
  position: sticky;
}

.left-content {
  display: flex;
  align-items: center;
  /* gap: 10px; */
  flex-shrink: 0;
}

.contact-info {
  display: flex;
}

.contact-info span {
  margin-right: 10px;
  font-size: 12px;
  color: maroon;
  padding-left: 5px;
  text-transform: none;
}

.contact-info i {
  color: maroon;
  text-transform: none;
}

div.contact-info span {
  text-transform: none;
}

div.contact-info i {
  text-transform: none;
}

.fa-solid fa-envelope {
  text-transform: none;
}

HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">

<div class="header-container">
  <div class="left-content">
    <div class="contact-info">
      <i class="fa-solid fa-envelope"><a href=""><span>contact@flowershop.ma</span></a></i>
      <i class="fa-solid fa-phone" style="color: maroon;"><span>+212 615 562 100</span></i>
    </div>

    <div class="sm-icons">
      <a href="#"><i class="fa-brands fa-facebook"></i></a>
      <a href="#"><i class="fa-brands fa-instagram"></i></a>
      <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
    </div>
  </div>

  <img src="Logo TP BG.png" alt="" class="logo">

  <nav class="right-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">FAQs</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>

  </nav>
</div>

问题现象 #

邮箱地址contact@flowershop.ma显示为全大写形式，电话号码则正常显示。

核心问题 #

你把<a>和<span>文本元素嵌套在了Font Awesome的<i>图标标签内部，而Font Awesome的图标类（如.fa-solid）自带了text-transform: uppercase样式，导致内部文本被强制转换为大写。此外，图标标签仅用于渲染图标，不应该包含其他文本内容，这种写法不符合语义规范。

修正步骤 #

1. 调整HTML结构：将图标与文本元素分离，让<i>仅作为图标容器，文本放在同级元素中：

<div class="header-container">
  <div class="left-content">
    <div class="contact-info">
      <!-- 修正邮箱部分结构 -->
      <div class="contact-item">
        <i class="fa-solid fa-envelope"></i>
        <a href="mailto:contact@flowershop.ma"><span>contact@flowershop.ma</span></a>
      </div>
      <!-- 修正电话部分结构 -->
      <div class="contact-item">
        <i class="fa-solid fa-phone"></i>
        <span>+212 615 562 100</span>
      </div>
    </div>

    <div class="sm-icons">
      <a href="#"><i class="fa-brands fa-facebook"></i></a>
      <a href="#"><i class="fa-brands fa-instagram"></i></a>
      <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
    </div>
  </div>

  <img src="Logo TP BG.png" alt="" class="logo">

  <nav class="right-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">FAQs</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</div>

2. 精简并优化CSS：删除多余的重复text-transform:none声明，添加样式让图标和文本对齐：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  width: 100%;
  padding: 0 20px;
  background-color: #cda349;
  position: sticky;
}

.left-content {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.contact-info {
  display: flex;
  gap: 15px; /* 增加联系方式之间的间距 */
}

/* 让单个联系方式内的图标和文本垂直对齐 */
.contact-item {
  display: flex;
  align-items: center;
}

.contact-item i {
  color: maroon;
}

.contact-item span,
.contact-item a {
  margin-left: 5px;
  font-size: 12px;
  color: maroon;
  text-decoration: none; /* 可选：去掉链接下划线 */
}

效果说明 #

修正后，邮箱地址会恢复原本的大小写显示，同时结构更符合语义化，后续样式调整也更灵活。

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