Wubijacq.comInsé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:
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
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
Rendu en temps réel
JS, CSS, HTML Editor :
Plunker
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
