Add a fontAwesom icon into an input

Question

I encountered a little problem. I wanted to put 2 fontAwesome icons in my login page like what i did in this picture :

but... That was berfore I check W3C. Apparently we can not use placeholder in a lot of input. So what I did is use some easy vanilla JS to get my boxes ID and add to them a placeholder.

But, font-family : "fontAwesome" doesn't works anymore on those placeHolder, I tried tu put my js into some variable to style them but it doesn't works either. So what's the common solution to this problem ? Put an image instead ?

Here's a part of my code :

let x = document.getElementById("mdp2").placeholder = "&#xf023;   Mot de passe...";
let y = document.getElementById("username").placeholder= "&#xf007   Nom d'utilisateur ou e-mail...";

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  font-family: "Play", sans-serif;
  box-sizing: border-box;
}
h1,
h2 {
  font-family: "Varela Round", Arial, Helvetica, sans-serif;
}
.compte {
  position: relative;
  width: 100%;
  height: 1500px;
  overflow: hidden;
  background : orange;
}
.compte > .video-bg {
  z-index: -10;
  position: absolute;
  min-width: 100%;
  min-height: 100%;
}
.contenu {
  position: relative;
  padding: 50px;
  text-align: center;
  margin: 0 auto;
  color: white;
}
.log {
  height: 50vh;
}
.contenu-cont {
  margin: 250px auto;
}
.contenu-cont > h1 {
  font-size: 60px;
  color: orangered;
}
.contenu-cont > span {
  letter-spacing: 5px;
  font-size: 20px;
}
.box-log {
  position: relative;
  margin: -140px auto;
  width: 100%;
}

.log > h2 {
  margin: 0 0 25px 0;
  font-size: 36px;
}
.input-box {
  margin: 15px 0;
  display: flex;
  justify-content: center;
}
.user-box {
  border-radius: 25px;
  padding: 15px;
  width: 400px;
  border: none;
  outline: none;
  background-color: rgba(255, 255, 255, 0.267);
  color: white;
}
.user-box::placeholder {
  color: white;
  font-family: "jura", fontAwesome;
  padding: 0 0 0 5px;
}
#mdp2::placeholder{
  font-family: "jura", fontAwesome;
  padding: 0 0 0 5px;
}

.btn-sign {
  background: orangered;
  outline: none;
  width: 180px;
  padding: 13px;
  border-radius: 35px;
  border: none;
  color: white;
  cursor: pointer;
  transition: 0.5s;
}
.btn-sign:hover {
  opacity: 0.8;
}
.ou {
  font-weight: 500;
}
.oup {
  font-weight: bolder;
  color: rgba(255, 0, 0, 0.829);
  font-size: 22px;
}
.subm {
  color: blue;
}
@media screen and (max-width: 540px) {
  .contenu-cont > h1 {
    font-size: 40px;
    padding: 0;
  }
  .contenu-cont > span {
    letter-spacing: 5px;
    font-size: 15px;
  }
  .log > h2 {
    font-size: 20px;
  }
}

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>PharmaTech</title>
        <meta name="description de la page" content="A compléter pour le referencement"><!--Description du site, apparait notamment dans la description google-->
        <meta charset="utf-8">
        <meta name="robots" content="index, follow, aussi pour le referencement"><!--index du site, apparait notamment dans la description google-->
        <link rel="icon" href="image/Phoenix-detoure.png"><!--Icone de l'onglet de site-->
        <meta name="viewport" content="width=device-width, initial-scale=1"><!--toujours afficher l'entiereté de la page peu importe la largeur-->
        <link href="https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Jura:wght@700&display=swap" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="compte.css">
        <link rel="stylesheet" href="header.css">
        <link rel="stylesheet" href="footer.css">
        <script src="https://kit.fontawesome.com/3b3be1baf7.js" crossorigin="anonymous"></script>
    </head>
    <body>    
        <header>
            <nav class="navbar">
                <div class="logo"></div>
                <span class="hamburger"><label id="hamburger">&#9776;</label></span>
                <span class="cross"><label id="cross">&#10006;</label></span>
                <ul>
                    <li id="home"><a href="index.html"><span> <i class="fas fa-home" style="padding-right: 10px;"></i></span> Index </a></li>
                    <li id="Shop"><a href="Shop.html"> <span><i class="fas fa-store-alt" style="padding-right: 15px;"></i></span>Boutique</a>
                        <ul class="dropdown" role="menu">
                            <li><a href="Nano.html"> Nanites</a></li>
                            <li><a href="Drone.html"> Assistances</a></li>
                            <li><a href="Prothese.html"> Prothèses</a></li>
                            <li><a href="organe.html"> Organes</a></li>
                        </ul>
                    </li>
                    <li id="compte"><a href="compte.html"><span><i class="fas fa-user" style="padding-right: 10px;"></i></span> Compte </a>
                        <ul class="dropdown" role="menu">
                            <li><a href="compte.html">Se connecter</a></li>
                            <li><a href="sign.html">S'inscrire</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="search">
                    <input type="text" placeholder="Recherche...">
                    <button class="loupe"><i class="fas fa-search"></i></button>
                </div>
            </nav>           
        </header>
            <div class="compte">
                <video autoplay loop muted class="video-bg">
                    <source src="videos/back3.mp4" type="video/mp4">
                </video>
                <div class="form">
                    <div class="contenu">
                        <div class="contenu-cont">
                            <h1>PharmaTech</h1>
                            <span>From chance to choice</span>
                        </div>
                            <div class="box-log">
                                <div class="log">
                                    <h2>Se connecter</h2>
                                <form>
                                    <div class="input-box">
                                        <input class="user-box" type="username" name="username" id="username" >
                                    </div>
                                    <div class="input-box">
                                        <input class="user-box" type="password" name="password" id="mdp2" required>
                                    </div>
                                    <div class="button-co">
                                        <button type="submit" class="btn-sign">Se connecter</button>
                                    </div>
                                    <hr style="width:280px; margin: 20px auto;">
                                    <p class="ou"> Pas encore inscrit ? <a href="sign.html" class="oup">S'inscrire</a></p>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <footer>
            <div class="footer-container">
               <div class="left-content">
                   <div class="up">
                       <div class="theme">A propos de nous</div>
                       <p>
                        Leader dans les domaines de la bio-ingénierie, pharmaceutique et assistance en tous genres, 
                        nous mettons notre savoir-faire à votre service depuis plus de 150 ans.
                       </p>
                   </div>
                   <div class="low">
                       <div class="theme">Nous contacter</div>
                       <div class="tel">
                            <a href="#"><span>&#9990;</span> +356 053 356 152</a>
                       </div>
                       <div class="mail">
                           <a href="#"><span>&#9993;</span> abc@pharmatech.com</a>
                       </div>
                   </div>
               </div>
               <div class="middle-content">
                    <div class="theme">Nos services </div>
                        <div> <a href="Contact.html">Nous trouver</a></div>
                        <div> <a href="about.html">En savoir plus</a></div>
                        <hr>
                        <div> <a href="#">Rapport</a></div>
                        <div> <a href="#">Powerpoint</a></div>
                    </div>
               <div class="right-content">
                   <div class="theme">Subscribe us</div>
                   <form action="#">
                    <input type="text" name="email" placeholder="Entrer votre adresse mail"  required>
                    <input type="submit" name="envois" value="Envoyer" class="subm">
                    <div class="reseaux"> 
                        <a href="#"><img src="image/facebook.ico" alt="Logo de facebook"></a>
                        <a href="#"><img src="image/twitter.ico"  alt="Logo de twitter"></a>
                        <a href="#"><img src="image/whatsapp.ico"  alt="Logo de whatsapp"></a>
                        <a href="#"><img src="image/instagram.ico"  alt="Logo d'instagram'"></a>
                    </div>
                   </form>
               </div>
            </div>
        </footer>
        <div class="bas">
            <p>Copyright &#169; 2020 <span>PharmaTech</span> by Alexandre Novais & Nhat Linh Nguyen</p>
        </div>
        <script>  
            window.addEventListener('scroll', function (e) {
             // Setup the new requestAnimationFrame()
            let timeout = window.requestAnimationFrame(function () {
            // Run our scroll functions
            let nav = document.querySelector('nav'); /*Selection de la class voulus grace à query*/
            if (document.querySelector('header').getBoundingClientRect().top !== 0) {
             nav.classList.add('scroll');
             } else {
            nav.classList.remove('scroll');
             }      
        });
            }, false);
        </script>
           <script>
             let hamburger = document.querySelector(".hamburger");
             let cross = document.querySelector(".cross");
             let ul = document.querySelector("ul");
      
             hamburger.onclick = () =>{
                 hamburger.style.opacity = 0;
                 hamburger.style.visibility = "hidden";
                 cross.style.opacity = 1;
                 cross.style.visibility = "visible";
                 ul.style.top = "80px";
             }
             cross.onclick = () =>{
                 hamburger.style.opacity = 1;
                 hamburger.style.visibility = "visible";
                 cross.style.opacity = 0;
                 cross.style.visibility = "hidden";
                 ul.style.top = "-600px";
             }
         </script>
        <script src="JS/placeholder2.js"></script>
    </body>
</html>

codepen

Thank you again!

Does this answer your question? [Use Font Awesome Icon in Placeholder](https://stackoverflow.com/questions/19350291/use-font-awesome-icon-in-placeholder) — Shahnawaz Hossan, Jan 10 '21 at 12:18
I think you should use require.js file to apply font awesome in javascript. Other wise you can use cdn in html and take place holder to import font awesome in html like this. https://stackoverflow.com/questions/19350291/use-font-awesome-icon-in-placeholder#:~:text=Use%20placeholder%3D%22%EF%80%82,FontAwesome%3B%22%20in%20your%20input. — Md. Redone Hassan, Jan 10 '21 at 12:13

Imran Rafiq Rather · Answer 1 · 2021-01-10T12:45:09.037

You can add your own CSS to do this. Here is the demo :)

IDEA: Idea is to set a wrapper div around your input and icon. Set a border on wrapper and set border:none and outline:none; on input.

.search{
  display:inline-flex;
  border:1px solid #777;
  padding:5px 10px;
  border-radius:1rem;
}

.search input{
  border:none;
  outline:none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>

<div class="search">                       
 <i class="fas fa-search"></i>
 <input type="text" placeholder="Recherche...">
</div>

score 0 · Answer 2 · answered Jan 10 '21 at 12:32

let inputContainer = document.querySelector('.input');
let placeholderEl = inputContainer.querySelector('.placeholder');
let inputEl = inputContainer.querySelector('input');

inputEl.addEventListener('focus', () => {
  placeholderEl.style.display = 'none';
  inputEl.focus();
});

inputEl.addEventListener('blur', () => {
  if (inputEl.value.trim().length === 0) {
    placeholderEl.style.display = 'block';
  }
});

placeholderEl.addEventListener('click', () => {
  placeholderEl.style.display = 'none';
  inputEl.focus();
});

.input {
  position: relative;
}

.input .placeholder {
  position: absolute;
  top: 8px;
  left: 10px;
  color: #444;
}

input {
  outline: none;
  border: 1px solid #CCC;
  border-radius: 17px;
  padding: 10px;
  height: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>

<div class="input">
  <div class="placeholder"><i class="fa fa-user"></i>&nbsp;Username</div>
  <input type="text" />
</div>

Add a fontAwesom icon into an input

2 Answers2