0

Since I use Font Awesome version 5 I have a problem with icons inside an input element. It shows only outside the input text element.

Image of what I mean I want the icon INSIDE the input type text field.

The code:

.calendar-label::after {
    content: "\f073";
    font-family: "Font Awesome 5 Solid";
   display: none;
   position: absolute;
}
<head>

<script>
  FontAwesomeConfig = { searchPseudoElements: true };
</script>

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

</head>

<body>

<label class="calendar-label">
   <input type="text" name="datum">
</label>

</body>
Bas Verhagen
  • 3
  • 5
  • as i told you before, use negative margin and you will get it inside ... or refer to the other question for more ways https://jsfiddle.net/2bzg1Lwj/1/ – Temani Afif Mar 12 '18 at 12:37
  • Negative margin is not the solution when the input gets smaller. And it is not a duplicate of existing questions because version 5 of fontawesome icons is totaly different then earlier versions. Thats the problem. – Bas Verhagen Mar 12 '18 at 12:49
  • show me how negative margin aren't solution when input get smaller – Temani Afif Mar 12 '18 at 12:50
  • I think it works! Thanks for your respons. – Bas Verhagen Mar 13 '18 at 15:34

0 Answers0