Insérer une icône Fontawesome

Dans un input ou un textarea

fontawesome.com et 525icons.com par exemple fournissent des fontes iconiques pour les webmasters

Pour faire apparaitre ces icônes, il faut placer un lien vers la page CSS de ces icônes, dans la partie HEAD de votre page.

Exemple:
<link rel="stylesheet href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet href="https://cdn.jsdelivr.net/525icons/2.6.0/525icons.min.css">

Autres fontes iconiques:

<> comme icône

Dans un formulaire responsive

Placer des icônes à l' intérieur d' un input ou d' un textarea rend le formulaire encore plus flexible et accessible, l' intitulé et le champ de saisie restant toujours alignés.
L' astuce pour placer l' icône à l' intérieur des input et du textarea est de placer l' icône en position: absolute et l' input en position: relative dans une div.

Ooops

  thx 2 zFunx

Bon là ce n' est que du HTML pur code. Je vais devoir ajouter du style CSS pour que le formulaire soit plus présentable.

Codes

HTML

<form id=form method="post" action="">

<div class="input-icone">
<input type="text" placeholder="Pseudo">
<i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
</div>

<div class="input-icone">
<input type="email" placeholder="Courriel">
<i class="fa fa-envelope-open fa-lg fa-fw" aria-hidden="true"></i>
</div>

<div class="input-icone">
<div><i class="fa fa-comment fa-lg fa-fw" aria-hidden="true"></i>
</div>
<textarea type=text name=comment placeholder="Votre avis"></textarea>
</div>

<div class="input-icone">
<input type=submit id=submit class=button value="GO">
<input type=reset id=submit class=button value="<<">
</div>

</form>

CSS

input[type=text], input[type=email], textarea {
width:100%; max-width:250px; border:2px solid #72ae00; border-radius:4px; margin:8px 0; outline:none; padding:8px; box-sizing:border-box; }
input[type=text], input[type=email]{
height:35px }
textarea {
height:75px;font-family: "Helvetica Neue", "Arial", "clean", "sans-serif";font-size: 13px; line-height: 1.1; }
.input-icone input[type=text], input[type=email], textarea {
padding-left:35px; }
.input-icone{
position:relative; }
.input-icone i{
position:absolute; left:0; top:8px; padding:9px 8px; color:#72ae00; }
input[type=text]:hover {
background: #f2f2f2; }
input[type=email]:hover {
background: #f2f2f2; }
textarea:hover { background: #f2f2f2; }
input.button {
background: #72ae00; color: #fff; border-color: #72ae00; border-radius:4px; height: 40px; width: 50px; font: bold 15px arial, sans-serif; text-shadow:none; cursor:pointer; }

Résultat

Éditeur de texte HTML+CSS sur le web :
Scrachpad rendu en temps réel

L' icône rétrécit le champ de saisie du textarea :
Placer l'icône dans placeholder

Icônes dans un formulaire dans une page popup dans une fenêtre iframe
Formulaire dans une fenêtre popup

Logiciels les plus téléchargés

Les DEBs XnViewMP-linux et les MSI IsoRecorder et Gpick sont actuellement les logiciels les plus demandés sur wubijacq.com