Forum

Ask for help to thousands of professionals from different fields
This question has been marked as solved
Question
author_picture
| Etudiant
| Germany
Junior Level
60 Points

Comment ajouter une icône sur un champ de texte

Salut, Je suis en train de m'exercer sur un petit exemple dans lequel j'ai plusieurs formulaires et j'aimerais ajouter une icône sur chaque champ de texte question de les rendre un peu plus esthétique. Mais je sais comment faire cela. 

J'aimerais obtenir quelque chose un peu semblable à ceci:

 

Mon code html est le suivant:

<form action="traitement.php">
  Nom d'utilisateur:<br>
  <input type="text" name="username">
  <br>
  Mot de passe:<br>
  <input type="password" name="password">
  <br><br>
  <input type="submit" value="Se Connecter">
</form> 

Merci d'avance.

CSSHTML
19.11.2017 19:11
Best Answer
author_picture
| Software Engineer
| Canada
Standard Level
35 Points

Pour le faire tu as besoin de manipuler un peu le CSS. Je ne sais pas quel type d'icône tu utilises, mais je vais faire un exemple avec les icônes de FontAwesome.

Voici d'abord le CSS de FontAwesome que je charges:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Maintenant pour ton code, je modifie comme ceci:

<form action="traitement.php">

  Nom d'utilisateur:<br>
  <div class="input_container">
    <span class="input_icon"><i class="fa fa-user" aria-hidden="true"></i></span>
    <input type="text" name="username">
  </div>

  <br>

  Mot de passe:<br>
  <div class="input_container">
    <span class="input_icon"><i class="fa fa-unlock-alt" aria-hidden="true"></i></span>
    <input type="password" name="password">
  </div>

  <br><br>

  <input type="submit" value="Se Connecter">
</form> 

 

Et le CSS juste pour positionner les icônes:

.input_container{
position: relative; /*important*/
}

.input_icon{
position: absolute; /*important*/
top: 2px;
color: red; /*Tu peux changer ici*/
left: 2px;
font-size: 21px; /*Tu peux changer ici*/
width: 50px;
}

input[type="text"], input[type="password"] {
    padding-left:70px; /*Laisse de l'espace pour l'icône*/
}

J'espere que tu vois comment ça fonctionne. Sinon tu peux encore demander si tu ne comprends pas bien.

You have already upvoted this answer !!! You have already downvoted this answer !!! You can not vote your own answer
author_picture
| Etudiant
| Germany
Junior Level
60 Points

Ah Ok tu as raison. Je n'avais pensé de cette façon. Si je comprends bien le but est de positionner l'icône au dessus du champ de texte en mettant l'icône en "position: absolute" dans un conteneur en "position:relative" contenant le champ de texte. Cool. Merci.

You have already upvoted this answer !!! You have already downvoted this answer !!! You can not vote your own answer
× You are not logged in. Please login or sign up for free to answer this post.

Your Answer

×

You gain:

  • +15 points when your answer is marked as accepted
  • +5 points when your answer is voted up

You lose:

  • -2 points when your answer is voted down
forum_icon Related Topics