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

<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>

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

Scrachpad rendu en temps réel

Vous pouvez modifier le code HTML et CSS pour le tester dans le "Scratchpad de Nathan Baschez" installé sur mon site.
Scrachpad de @nbashaw

Contourner le "margin" dans textarea

L' icône rétrécit le champ de saisie du textarea :
zFunx recommande de faire un "text-indent" autour de l' icône.
Placer l'icône dans placeholder

Formulaire dans un Popup

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