Titre souligné avec icon devant ?

Bonjour
Je cherche à intégrer un icône si possible boostrap 5 dans le code css

<i class="bi bi-calendar"></i><h2>mon titre</h2>

j'ai pour l'instant réussi à souligné mais c'est tout

h2 {
border-bottom: solid;
}

De manière vraiment accessoire, je me demande si via un codage css simple on peut avoir un effet dynamique comme le soulignement qui irait de gauche à droite au moment du scroll !?
Modifié par HDcms (10 Jan 2022 - 13:59)

HDcms a écrit :
je me demande si via un codage css simple on peut avoir un effet dynamique comme le soulignement qui irait de gauche à droite

Oui mais il faudra passer pas un ::before que tu viendras placer en absolute dans ton H2 et que tu animeras avec animation ou transition

HDcms a écrit :
au moment du scroll !?

Non. Enfin pas en CSS pur. Il faudra du Js si tu veux ajouter des évènements déclencheurs.

Bonjour
Bon j'abandonne pour l'animation au moment du scroll
le plus important est
1/ ou trouver l'équivalent svg de <i class="bi bi-calendar"> ?
2/ comment l'intégrer après dans le css ?
Je trouve bien des icones sur https://fontawesome.com/v5.15/icons/calendar?style=solid par ex mais après je n'ai pas trouvé la suite et je dois l'intégrer dans css car je dois le faire sur de nombreux éléments?!

Re
je veux passer par un code standard indépendant d'une url car cela devrait s'appliquer à de nombreuses pages.
J'avais vu la page https://fontawesome.com/v5.15/how-to-use/on-the-web/advanced/css-pseudo-elements mais désolé je bute toujours sue le même problème

A/ fontawesome
Je récupère https://fontawesome.com/v5.15/icons/calendar?style=solid
l'unicode: "f133"

<h2 class="bi-calendar">mon titre</h2>

h2.bi-calendar::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }
h2.bi-calendar::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f133    ";
  }

h2 {
border-bottom: solid;
}

Plusieurs problèmes
A1 je ne vois pas l'icone calendar;!Comment faire la correspondance entre l'icône et le code attendu du "content" ?
A2 je n'arrive pas à faire de décalage après l'icone ?
A3 comment augmenter la taille de l'icone
A4 le 1er code css est obligatoire si je comprends bien ?

B/ bootstrap
j'aimerais tester aussi cette solution car bootstrap5 est dans joomla 4
je vois une icone https://icons.getbootstrap.com/icons/calendar/ qui a pour code

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">

B1 Comment l'intégrer comme autre exemple ??

 {
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.6em' height='1.2em' viewBox='0 0 40 30' %3E%3Cpath fill='none' stroke='%23000' d='M14 12H26A3 3 0 1 0 23 9V21A3 3 0 1 0 26 18H14A3 3 0 1 0 17 21V9A3 3 0 1 0 14 12'/%3E%3C/svg%3E");

B2 je n'y arrive pas dans https://jsfiddle.net/ est-ce parce que c'est boostrap ?

Bonjour,

L'icone n'a pas pour code ce que tu as indiqué dans ton post.

1) Tu vas à https://icons.getbootstrap.com/icons/calendar/
2) Tu cliques sur le bouton "Download svg" (partie droite de l'écran)
3) Tu déplaces le fichier (qui s'appelle normalement calendar.svg) dans le répertoire où se trouve ton css (important)
4) Dans le css, tu mets

ul {
   list-style-image: url("calendar.svg");
}

EDIT: dans un :before, c'est le même principe

h2.bi-calendar::before {
    content: url("calendar.svg");
}

Amicalement,
Modifié par parsimonhi (10 Jan 2022 - 18:54)

Bonsoir
merci , néanmoins je suis désolé, mais comme j'essaie de monter en compétences et pas juste récupérer un bout de code, j'aurai besoin de clarification et notamment sur mes questions

J'essayais 2 pistes fonte. & bootstrap (peut-être faut-il rescinder ?)
A/ fontawesome
Je pense que cela pourrait fonctionner, mais il est nécessaire que l'icône ne soit pas souligné ,ce qui doit poser des problèmes et c'est ce que je n'arrive pas à faire dans cette version

B/ boostrap5
est-ce qu'il est possible de mettre le fichier

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">

Moyennant probablement adaptation dans css ?
[je préférerai car plus compliqué dans mon architecture d'utiliser des fichiers !]
Modifié par HDcms (10 Jan 2022 - 18:54)

Bonjour,

Un exemple ici : https://jsfiddle.net/parsimonhi/6qp0e2td/

Amicalement,
Modifié par parsimonhi (10 Jan 2022 - 19:03)

Bonjour,

Version avec une icone non soulignée et un h2 souligné https://jsfiddle.net/parsimonhi/x3sd0o61/

Amicalement,