Problem with styling FontAwsome icons (seems to be a bug!)

Question

In the following code, I tried to position the font awesome icon inside a text input tag. But the styling of the <i> tag does not apply. After hours, I found out that if I remove the FontAwesome Javascript CDN, it works as expected! I wonder what exactly goes wrong. Is this a bug in FontAwesome?

Here is the snippet, with FontAwesome Javascript CDN,

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
 <style type="text/css">

    input[type="text"] {
      width: 50%;
      border: 2px solid #aaa;
      margin: 8px 0;
      outline: none;
      padding: 8px;
      box-sizing: border-box;
    }

    .input-with-icon input[type="text"] {
      padding-left: 40px;
    }

    .input-with-icon {
      position: relative;
    }

    .input-with-icon i {
      position: absolute;
      left: 0;
      top: 8px;
      padding: 9px 8px;
      color: #aaa;
      transition: 0.3s;
    }
 </style>
</head>
<body>

<div class="input-with-icon">
  <input type="text" placeholder="Your name">
  <i class="fa fa-user fa-lg"></i>
</div>

</body>
</html>

And Now without the FontAwesome Javascript CDN,

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
 <style type="text/css">

    input[type="text"] {
      width: 50%;
      border: 2px solid #aaa;
      margin: 8px 0;
      outline: none;
      padding: 8px;
      box-sizing: border-box;
    }

    .input-with-icon input[type="text"] {
      padding-left: 40px;
    }

    .input-with-icon {
      position: relative;
    }

    .input-with-icon i {
      position: absolute;
      left: 0;
      top: 8px;
      padding: 9px 8px;
      color: #aaa;
      transition: 0.3s;
    }
 </style>
</head>
<body>

<div class="input-with-icon">
  <input type="text" placeholder="Your name">
  <i class="fa fa-user fa-lg"></i>
</div>

</body>
</html>

Of course your styling doesn't work...the FontAwesome JS converts the `i` tag to an `svg`. Since your CSS doesn't target the SVG, it won't style it. — disinfor, Apr 29 '20 at 13:56

score 0 · Answer 1 · answered Apr 29 '20 at 13:56

The FontAwesome JavaScript replaces the i elements with svg elements.

To style the elements, change your selector: .input-with-icon svg { ... }

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
  <style type="text/css">
    input[type="text"] {
      width: 50%;
      border: 2px solid #aaa;
      margin: 8px 0;
      outline: none;
      padding: 8px;
      box-sizing: border-box;
    }
    
    .input-with-icon input[type="text"] {
      padding-left: 40px;
    }
    
    .input-with-icon {
      position: relative;
    }
    
    .input-with-icon svg {
      position: absolute;
      left: 0;
      top: 8px;
      padding: 9px 8px;
      color: #aaa;
      transition: 0.3s;
    }
  </style>
</head>

<body>

  <div class="input-with-icon">
    <input type="text" placeholder="Your name">
    <i class="fa fa-user fa-lg"></i>
  </div>

</body>

</html>

score 0 · Answer 2 · answered Apr 29 '20 at 13:56

Change of CSS target .input-with-icon .fa-user

.input-with-icon .fa-user {
      position: absolute;
      left: 0;
      top: 8px;
      padding: 9px 8px;
      color: #aaa;
      transition: 0.3s;
    }

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
 <style type="text/css">

    input[type="text"] {
      width: 50%;
      border: 2px solid #aaa;
      margin: 8px 0;
      outline: none;
      padding: 8px;
      box-sizing: border-box;
    }

    .input-with-icon input[type="text"] {
      padding-left: 40px;
    }

    .input-with-icon {
      position: relative;
    }

    .input-with-icon .fa-user {
      position: absolute;
      left: 0;
      top: 8px;
      padding: 9px 8px;
      color: #aaa;
      transition: 0.3s;
    }
 </style>
</head>
<body>

<div class="input-with-icon">
  <input type="text" placeholder="Your name">
  <i class="fa fa-user fa-lg"></i>
</div>

</body>
</html>

score 0 · Answer 3 · answered Apr 29 '20 at 13:59

simply use this instead of your code. the font awesome js change the actual <i> element you are writing to render a svg.

.input-with-icon svg {
      position: absolute;
      left: 0;
      top: 8px;
      padding: 9px 8px;
      color: #aaa;
      transition: 0.3s;
    }

Problem with styling FontAwsome icons (seems to be a bug!)

3 Answers3