由span标签显示的文本，后跟font Awesome i标签全部以大写形式显示，因为我需要它们以小写形式显示。如何解决这个问题？

Question

我正在尝试显示电子邮件地址，后跟由 font Awesome 放置的信封图标。然而，电子邮件地址全部以大写字母显示，而我没有给出这样的具体指示。为了纠正这个问题，我使用 text-transform: none 处理了所有相关元素和标签，同时包含内联样式和 CSS 样式。花了大约一个小时尝试所有可能的选择。但问题仍然存在。请查看我的 HTML/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;
}

 <div class="header-container">
        <div class="left-content">
            <div class="contact-info">
                <i class="fa-solid fa-envelope"><a href=""><span>[email protected]</span></a></i>
                <i class="fa-solid fa-phone" style="color: maroon;"><span>[phone]</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>

突出显示问题的屏幕截图

Answer 1

SO 上的片段预览显示小写版本，所以也许您端加载了一个额外的样式表？

有两件事，

1. 创建另一个

   <a>

   标签并检查其文本是否大写（同时打开开发人员工具并查看电子邮件

   <a>

   标签上应用的样式）
2. 将

   !important

   放在

   text-transform: none

   之后，可能会优先考虑更具体的内容，并且使用 CSS 的 !important 将取代该层次结构。