Question 419453 in Html Question posted in
Some basic documentation can be found here.

Html – Text displayed by a span tag followed by font awesome i tag is all displayed in UPPERCASE where as I need them in lowercase. How to fix this?

I’m trying to display the e-mail address followed by an envelop icon placed from font awesome. However, the e-mail address is displayed all in UPPERCASE letters while I have not given such specific instruction. To rectify this, I addressed all the related elements and tags with text-transform: none with both inline styling and CSS styling. Spent like an hour trying all the possible options. But still the issue persists. Please see my both HTML/ CSS codes, additional style sheet loaded for font awesome as a link in the head section and the screenshot of the website where the issue is highlighted. Please assist resolving this issue. Thanks

* {
  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;
}
<!-- Additional style sheet loaded for font awesome -->
<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>[email protected]</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>

Screenshot of the issue highlighted

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    I resolved the problem by removing the span tag from the i tag and place it after the i tag as follows;

    [email protected]

    This resolved the problem and now the e-mail address appears all in lowercase. No more manipulation of being in UPPERCASE

    All these time, i tag was affecting the span tag to display its text in UPPERCASE. Once the span tag with its text detached from the i tag and placed outside the i tag, then the e-mail address displays all in lowercase (as typed in lowercase)


  2. 0

    The snippet preview on SO displays the lowercase version, so maybe there’s an additional stylesheet being loaded on your end?

    Two things,

    1. Create another <a> tag and check if its text is capitalized as well (Also open your developer tools and look at the applied styles on the email <a> tag)
    2. Place !important after your text-transform: nones, it’s likely something more specific is taking priority, and using CSS’s !important would supersede that hierarchy.
    Login or Signup to reply.
  3. 0

    Move your text out of the font-awesome i tags.

    * {
  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;
  flex-shrink: 0;
}

.contact-info {
  display: flex;
  gap: 1em;
  color: maroon;
}

.contact-info span {
  padding-left: 5px;
}

.contact-info a {
  color: maroon;
}
    <!-- Additional style sheet loaded for font awesome -->
<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">
      <a href="mailto:[email protected]"><i class="fa-solid fa-envelope"></i><span>[email protected]</span></a>
      <a href="tel:+212615562100"><i class="fa-solid fa-phone"></i><span>+212 615 562 100</span></a>
      <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>
    Login or Signup to reply.
  4. 0

    I have checked this problem and code comprehensively. The ‘fa-solid’ class of font awesome will always cause the email to print in uppercase as it contains fa-solid 900.woff2 and fa-solid 900.ttf files which have only uppercase characters!

    The solution is to replace

    <span>[email protected]</span>

    with this

    <span style="font-family: san-serif"> [email protected]</span>

    Then this will work perfectly!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search