bootstrap et css icone svg

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 :

Pièce jointe 605797

Merci par avance de votre aide.

@+ Filou

Bonjour,

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

Voir aussi :

• Input group

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

Code:

---

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

J'ai trouver la réponse :

Code:

---

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>

---