0

I need to add a Fontawesome icon to an input field, using the ::before pseudo element. However, the icon is not showing and I can't figure out what I'm doing wrong. (I'm using Bootstrap and Fontawesome 5 Pro).

.search-field-round::before {
  content: '\f002';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  display: inline-block;
  position: absolute;
  top: 0;
  left: -5px;
  color: red;
}
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- FONT AWESOME CDN - Since I'm using a Pro version I do not wish to share my link here -->

    
    
 <form class=" form-inline searchbar-form col-12 ">
    <div class="col-10 search-field ">
        <input type="search " class="form-control search-field-round " placeholder="¿Qué servicio buscas? ">
    </div>
</form>
Paula
  • 477
  • 6
  • 20
  • I think the way pseudo elements can use fontawesome has changed with version 5 - see [link]https://stackoverflow.com/questions/47712987/font-awesome-5-on-pseudo-elements - you now have to enable it as it's disabled by default apparently., but can't use on an input element anyway as @cloned has pointed out. – A Haworth Nov 11 '20 at 16:46

3 Answers3

1

Hi From what I know pseudo element do not work on input fields. What you could do is put a span element inside the input and set the icon there or in your case put it in the parent div of the input.

K Nugal
  • 134
  • 9
0

I believe this is what you are looking for. You can not use pseudo elements on text fields.

Font Awesome icon inside text input element

James
  • 702
  • 2
  • 15
  • 39
0

After some more research I understand that it is not work with a pseudo element inside an input element. I did find this link very helpful, it worked for me:

input[type=text] {
  width: 100%;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: .3s;
}

input[type=text]:focus {
  border-color: dodgerBlue;
  box-shadow: 0 0 8px 0 dodgerBlue;
}

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

.inputWithIcon {
  position: relative;
}

.inputWithIcon i {
  position: absolute;
  left: 0;
  top: 8px;
  padding: 9px 8px;
  color: #aaa;
  transition: 0.3s;
}

.inputWithIcon input[type="text"]:focus+i {
  color: dodgerBlue;
}
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<div class="inputWithIcon">
  <input type="text" placeholder="Your name">
  <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
</div>
Paula
  • 477
  • 6
  • 20