Discussion :

[filou80]

Bonjour à tous,

Je me suis mis a refaire un site perso et je souhaite dans mes champs de type input mettre une icone a l'intérieur mais impossible.
J'utilise le framework bootstrap 5 avec qui normalement on peut utiliser les icone svg.
Mais je ne parviens pas a les inserer dedans.
Ci un internaute passe par le forum je suis preneur d'une solution.
Mon but est de faire quelque chose comme cela :



Merci par avance de votre aide.

@+ Filou

[jreaux62]

Bonjour,

• en label ou en placeholder ?
• icône fontawesome ? 4 ou 5 ?
• ...
• montre ton code

Voir aussi :

• Input group

[filou80]

En placeholder, j'utilise bootstrap 5.1 qui intègre maintenant les icônes.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div>
    <input type="text" class="input-group-addon"
 
    <svg class="bi" width="32" height="32" fill="currentColor">
        <use xlink:href="/../../imgs/icons/alarm-fill.svg"/>
    </svg>
 
    >
 
</div>

Merci par avance.

@+ Filou

[filou80]

J'ai trouver la réponse :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">
 
<div class="input-group mb-3">
  <div class="input-group-text">
    <svg height="24px" id="Layer_1" version="1.1" viewBox="0 0 48 48" width="48px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M24,0C10.746,0,0,10.745,0,24s10.746,24,24,24c13.256,0,24-10.745,24-24S37.256,0,24,0z M24,13.713  c2.809,0,5.084,2.275,5.084,5.083c0,2.809-2.275,5.084-5.084,5.084c-2.807,0-5.083-2.275-5.083-5.084  C18.917,15.988,21.193,13.713,24,13.713z M32.582,37.69c-2.491,1.537-5.416,2.439-8.559,2.439c-3.161,0-6.104-0.913-8.604-2.467  V27.326c0-0.904,0.733-1.638,1.638-1.638h13.888c0.904,0,1.638,0.733,1.638,1.638V37.69z" fill="#231F20"/></svg>
    User Name :
 
  </div>
 
  <input type="text" class="form-control">
</div>