Bonjour à tous,

J'utilise bootstrap 5.1 pour un petit site perso.
Comme bootstrap le propose maintenant, on peut utilisé des icônes en .svg, le soucis est que je ne parviens pas a insérer les icônes dans un input.
Merci par avance de votre aide.
@+Ludo

Pas de code, pas d'aide.

Bonjour,

Voila un bout de code mais impossible a le mettre dans un input pour faire comme cela :

<svg class="bi bi-check-box" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L8 9.293l6.646-6.647a.5.5 0 01.708 0z" clip-rule="evenodd"></path>
  <path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 003 14.5h10a1.5 1.5 0 001.5-1.5V8a.5.5 0 00-1 0v5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3a.5.5 0 01.5-.5h8a.5.5 0 000-1H3A1.5 1.5 0 001.5 3v10z" clip-rule="evenodd"></path>
</svg>

Bonjour,

Le code du svg c'est une chose mais quel est ton code ?

Qu'as-tu tenté pour l'insérer dans un input ?

Bonjour,
comme dans l'image cette image :

Merci pour votre aide.

@+ Ludo

Non ça c'est une image.

Tu dois nous montrer ton code. Pas seulement le code du svg, ni celui de la doc,... mais vraiment le tien. Montre nous le code que tu as fait et qui ne fonctionne pas sinon nous ne pouvons pas t'aider à trouver le problème...

voici un bout de mon code :

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

Et pourquoi ne pas se contenter de faire ce qui écrit dans la doc ?

https://getbootstrap.com/docs/5.1/forms/input-group/#basic-example

Bonjour,

Je préconiserai également à ludovicarduino d'aller voir/revoir les cours HTML/CSS présent sur le site. Au vu du code fourni, cela montre une méconnaissance presque total de l'HTML. A aucun moment tu ne peu mettre une balise dans un input!

Utiliser Bootstrap sans connaitre l'HTML/CSS au préalable ne te servira à rien.

bonjour Lord Morpheus,

Merci de ton aide et de faire avancé le fil de la discusion.
C'est justement pour cela que je demande de l'aide car je vois partout des champs input avec des icones je trouve cela chouette mais je ne parviens pas a le mettre en place.

@+ Ludo

-
Edité par ludovicarduino 30 septembre 2021 à 18:55:36

Est-ce que cela te convient ?

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

Mais comme dit plutôt, il vaut que tu apprennes la base HTML/CSS, tu ne peux continuer bootstrap sans avoir un solide base de ces deux langages.

J'espère que j'ai pu t'aider un peu

Super,

Merci a toi meteor141421356237, c'est exactement cela, avec un peu de css je l'ai adapté.
Je passe en résolu.

Je t'avais pourtant donné tout ce qu'il fallait pour que tu arrives à ce résultat par tes propres moyens et te permettre ainsi de progresser...

Au final tu voulais juste que quelqu'un fasse ton travail à ta place...