[Résolu] Titre souligné avec icon avec fontawesome ?

Bonsoir
Je dois choisir des icones différents pour une page détail d'une formation/événement et je préférerais ne pas utiliser de fichier pour des questions d'extensions du cms

j'utilise les références :
https://fontawesome.com/v5.15/how-to-use/on-the-web/advanced/css-pseudo-elements
https://codepen.io/fontawesome/pen/WVEobv

En partant de l'icone agenda https://fontawesome.com/v5.15/icons/calendar?style=regular

Je suis arrivé à

<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;
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 content: "XXXXXXX ???? ";
  }

h2 {
border-bottom: solid;
}

MAIS je n'arrive probablement pas à trouver le bon code qui correspond à calendar.
J'essaie l'unicode : "f133" dans le content voir au-dessus, mais je n'ai pas un bon rendu.
Comment faire
Modifié par HDcms (10 Jan 2022 - 20:27)

Bonjour,

Ne confonds-tu pas deux possibilités d'afficher cette icone représentant un calendrier :

- d'une part via une police de caractère "Font Awesome" (dont celle qui contient le caractère \f133 pour le calendrier et qui s'appelle "Font Awesome 5 Pro" si j'ai bien compris et non pas "Font Awesome 5 Free" comme tu le mets dans ton code) auquel car il faut se procurer si ce n'est déjà fait cette police de caractère, peut-être bricoler une installation (je ne me rappelle plus quoi car ça fait des années que je ne l'ai pas fait) et ensuite utiliser dans ton code :

h2.bi-calendar::before {
  font-family: "Font Awesome 5 Pro"; /* et non pas "Font Awesome 5 Free" */
  content: '\f133';
}

Note : c'est possible que "Font Awesome 5 Pro" soit payant. Il est aussi possible que "\f133" soit dans d'autres polices "Font awesome". Je n'ai pas chercher à comprendre.

- d'autre part via une image svg, auquel cas, il faut se procurer l'image svg du calendrier qu'on trouve par exemple à https://icons.getbootstrap.com/icons/calendar/ et dont tu peux télécharger le fichier qui va s'appeler calendar.svg (ou bien trouver où il se trouve dans ton bootstrap parce qu'il y est peut-être), éventuellement le recopier dans le répertoire où est ton fichier css pour t'éviter de te planter dans les chemins à mettre devant le nom du fichier, puis utiliser dans ton css :

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

Eventuellement, au lieu du code précédent, tu peux mettre directement dans ton fichier css le code suivant :

h2.bi-calendar::before {
	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>');
}

Note : j'ai tout simplement remplacer calendar.svg par son équivalent sous forme de data-image, c'est à dire data:image/svg+xml, suivi du contenu de calendar.svg. Attention, il ne faut pas laisser de retour à la ligne.

Exemple : https://jsfiddle.net/parsimonhi/axdqs7t8/

Amicalement,
Modifié par parsimonhi (10 Jan 2022 - 21:48)

Re
Merci pour ton suivi.
Sur la page https://icons.getbootstrap.com/icons/calendar/ il mentionne la version gratuite et pro.
Tu dis "... j'ai tout simplement remplacer calendar.svg par son équivalent sous forme de data-image, c'est-à-dire data:image/svg+xml, suivi du contenu de calendar.svg. ..."
C'est justement ce que je cherche à faire. Comment fais-tu ??
Bonne soirée

Je suis aussi perdu car j'ai l'impression que c'est la même valeur de "d" que j'ai trouvé dans l'autre fil sur la page boostrap5
je préférerai boostrap car il me semble que les auteurs sont plus libres que ceux de Font awesome . Ces derniers ont des versions free, pro et ont l'air de changer un certain nombre de paramètres assez souvent). Vu sur leur page et des demandes d'utilisateurs chez qui cela plante suite à une maj de version !!
Modifié par HDcms (10 Jan 2022 - 21:54)

Bonjour
D'abords merci et encore merci pour ta patience.
J'ai maintenant beaucoup mieux compris, je vais prendre note et a priori pas resolliciter sur ce sujet.
J'avoue ne pas trop rougir car c'est la 1ère fois que je n'utilise pas de fichier icone et que j'ouvre un fichier svg dans un éditeur?!

Pour boostrap5 vs " "Font Awesome 5", je n'avais aucun a priori. Après avoir passé des heures sur ce sujet, je balancerai plus pour boostrap!
Les fontes "Font Awesome" m'a l'air de poser des problèmes (changements techniques, commerciales ..) et je n'ai toujours pas compris comment changer de taille. Sur la page calendar, on voit plusieurs tailles mais je n'arrive qu'à télécharger que la grande (bon je n'insiste pas)
Tu as d'ailleurs utilisé le fichier boostrap et qu'il est facile de modiifer la taille dans l'édition du fichier
Après on parle bien des icones (qui sont d'ailleurs plus nombreux chez "Font Awesome" et boostrap doit poser d'autres problèmes d'intégration)

Salut,

Je viens mettre mon petit grain de sel.

Pour Bootstrap je suis totalement d'accord avec la règle de parsimonhi n°14

Pour FontAwesome, généralement quand on l'a sur le site c'est pour mettre des icones à droite à gauche, c'est fait pour ca. Je trouve ca donc dommage de ne pas l'utiliser pour rajouter des icones dans le titre, ou même dans la liste comme sur ton autre sujet.

Parsimonhi ayant très bien détaillé la partie inclusion de fichier avec url() et la variante avec le fichier inline avec data: je ne vais pas m'étendre la dessus et passer plutôt par la font-icon directement (je pense que c'est plus abordable pour un néophyte).

Avant toute choses :

Il faut télécharger les fichiers de font et les CSS et les inclure sur ton site si ce n'est pas déjà fait. Pour vérifier que c'est bon rdv à la solution 1.

Solution 1 pour inclure une icone : La basique

Rajouter dans ton html :

<i class="far fa-calendar"></i>

une belle icone de calendrier doit apparaitre.
Tu la mets ou tu veux, tu gère la taille avec font-size et la couleur avec color.

Pour ton soucis de soulignement du texte sans l'icone tu peu passer par un span comme Parsimonhi à fait ou à l'inverse une div qui vient entourer : https://jsfiddle.net/undless/bohyfm3p/

Solution 2 : Le flemmard

Tu veux ajouter la même icone sur tout tes H2 sans rien rajouter au code ? Tu peux passer avec le pseudo élément ::before exactement comme tu as fait au début de ce sujet avec l'unicode comme sur la doc : https://fontawesome.com/v5.15/how-to-use/on-the-web/advanced/css-pseudo-elements

Tu n'as pas le bon rendu ? Tu as un calendrier plein ? C'est parceque tu n'as pas mis la font-weight pour différencier les icones (Solid, régular, light, brand, ....).

Règle n°1 de moi : RTFM

La doc a écrit :
Set the font-weight to the right weight for the style you want to use (see style table).

[EDIT]APrès relecture je pense que le dit tableau des version pro/free vous à perturbé, il ne doit pas être à jour car il y a bel et bien des icones régular ET free : https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=regular&m=free quand tu cherche une icone sur el site, si elle est pas grisée c'est qu'elle est Free. Faut juste repérer à quelle style elle appartient.[/EDIT]

h2::before {
  font-family: "Font Awesome 5 Free";
  content: "\f133";
  font-weight: 400;
}

https://jsfiddle.net/undless/bohyfm3p/8/

Tu veux faire varier les icones pour chacun de tes titres ? Il suffit de mettre une classe spécifique sur chaque titre et de refaire tout les imports dans le CSS... wait... c'est déjà fait de base et ca s'appelle la Solution 1 Quitte a rajouter une classe dans ton HTML, rajoute la balise <i> avec l'icone qui va bien ca n'en sera que plus propre et plus maintenable*.

Pour les listes ? FontAwesome à meme déjà prévu le coup : https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/icons-in-a-list
Et boum ca remplace la puce par une icone. Si tu veux remplacer toutes les puces par la meme icone tu peux passer par la solution 2.

* Pour la maintenabilité, si tu décide de passer par l'unicode et que FontAwesome le change, tu devra repasser dans ton code pour remettre les bons. Je ne dis pas que ca va arriver, il y a peu de chance même, tu peux même ne jamais mettre ton fichier à jour, mais ca s'appelle un risque


Je crois avoir fait le tour.

Bonne journée
Modifié par _laurent (11 Jan 2022 - 10:54)

Bonjour
Merci @_Laurent d'avoir mis ton grain de sel et compléter

h2::before {
  font-family: "Font Awesome 5 Free";
  content: "\f133";
  font-weight: 400;
}

Ce code me convient.

Ce que je comprends, c'est qu'en sélectionnant les icônes gratuites https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=regular&m=free
puis l'unicode "f133" sur la page
puis en le mettant dans le code
cela fonctionne sur le site de test joomla

A/ cela ne fonctionne pas bien sur https://jsfiddle.net
Je n'ai pas le même rendu que toi sur firefox et chromuim sous ubuntu 21.10(voir les copies écrans). L'erreur en jaune n'a pas l'air impactante. Etrange !!
Cela explique en partie que mes essais n'étaient pas concluants avec les fonts.. ! avec votre outil de test !
Un peu moins dispo en ce moment mais effectivement, mais je vous dis cela si d'autres rencontraient ces problèmes en reproduisant votre code !

B/ En même temps, si ce n'est pas trop long, j'aimerais bien avoir le soulignement sur toute la longueur (sauf le titre, voir ton code) comme je l'avais sans l'icone:

h2 {
border-bottom: solid;
}

Sinon tant pis !

Bonne soirée
firefox

chromuim (j'ai mis le même code mais tronqué)

le plus important fonctionne sur le site de test !

Modifié par HDcms (11 Jan 2022 - 21:51)

HDcms a écrit :

A/ cela ne fonctionne pas bien sur https://jsfiddle.net
Je n'ai pas le même rendu que toi sur firefox et chromuim sous ubuntu 21.10(voir les copies écrans). L'erreur en jaune n'a pas l'air impactante. Etrange !!
Cela explique en partie que mes essais n'étaient pas concluants avec les fonts.. ! avec votre outil de test !
Un peu moins dispo en ce moment mais effectivement, mais je vous dis cela si d'autres rencontraient ces problèmes en reproduisant votre code !

Alors il faut relire mon explication, notamment le "Avant toute choses". Tu n'a pas inclus les font dans ton test. En même temps c'est normal, c'est pas évident à trouver sur ce site et quand on ne le sait pas, on ne peut pas le deviner !

Pour ajouter une ressource sur jsfiddle (ici on veut ajouter FontAwesome) il faut aller dans le menu "Ressources" de la colonne de gauche. Commence a taper "font-awesome..." et tu le verra apparaitre dans la liste. Choisi le et clique sur le + bleu a coté. Tu verra alors un all.min.css qui s'est ajouté au dessus du champs de recherche. Et on exemple peut maintenant utiliser FontAwesome.

Regarde sur mon exemple a moi dans la partie ressource.

HDcms a écrit :
j'aimerais bien avoir le soulignement sur toute la longueur (sauf le titre, voir ton code)

Sauf le titre ? ou sauf l'icone ?
Sinon un petit margin et un autre négatif peuvent faire l'affaire : https://jsfiddle.net/bL5sx8wp/

Bonne soirée

Re
Ok encore merci, 3 réponses enrichissantes même si j'en ai marqué uen seule.
Content d'avoir compris pourquoi j'avai autant galéré dans mes tests
Et ok pour l'amélioration, je pense que c'est bon
Fatigué Bonne nuit