[Résolu] Icone ne fonctionne pas souvent dans un format <i class ..

Bonjour
Bon je reviens sur cette prise de tête récurrente.
J'utilise des icônes pour qualifier une information.
Ce qui fonctionne bien (du moment que je suis dans la version <=5.2)

.blog-items a[href^="/site-web/communaute/"]::before {
  	font-family: "Font Awesome 5 Free";
	content: "\f500"; 
	font-weight: 900;
	display: inline-block;
	width: 40px;
	text-align: center;
	margin-left: -40px;

}
voir https://cochanger.eu/site-web/communaute

Ce qui ne fonctionne pas souvent pour le même icone !!

<i class='fas fa-user-group' aria-hidden='true'font-weight='900px'></i>

voir https://cochanger.eu/site-web/communaute/savez-vous-planter-chez-nous

Du coup ma question, c'est est-ce qu'il y aurait une solution pour résoudre cette incohérence ?
Ou alors comment faire pour appliquer une règle css équivalente, en ajoutant un attribut dans mon <i> ?
Modifié par HDcms (31 Oct 2022 - 16:51)

Salut,

fa-user-group n'existe pas dans ton fichier https://cochanger.eu/media/system/css/joomla-fontawesome.min.css?7875eea920ce53c5d09109a2eacc468d . Si tu cherche \f500 il s'agit de fa-user-friends

Bonjour
Pourtant, si je vais sur la page https://fontawesome.com/icons/user-group?s=solid&f=classic
J'ai bien les 2 possibilités d'indiquer.

J'ai déjà cherché, mais à priori je n'ai pas la possibilité de surcharger ce fichier fontawesome.
Du coup je dois utiliser quel attribut et quel css pour faire la même chose ? si c'est possible ?

_laurent a écrit :
Si tu cherche \f500 il s'agit de fa-user-friends

Donc :

<i class='fas fa-user-friends'></i>

Ce qui compte c'est le fichier utilisé par ton site hein.

Ou alors faut mettre à jour ton fichier FontAwesome

Re

a écrit :

<i class='fas fa-user-friends'></i>

Ce qui compte c'est le fichier utilisé par ton site hein.

Je n'ai pas compris, car j'applique la copie du code telle que mis sur le site https://fontawesome.com/icons/user-group?s=solid&f=classic
Si c'est une erreur du cms, cela risque d'être un peu lourd pour demander une correction

En tout les cas j'ai remplacé par

<i class='fas fa-user-friends'></i>

cela n'a pas fonctionné

Mais de plus j'ai plusieurs cas de figure , ou j'ai abandonné précédemment , avec une incohérence d'icones entre la page blog et la page article

Du coup je me demandais , s'il y avait une méthode plus générique pour utiliser content: "\f500"; du style

.icone-faw {
  	font-family: "Font Awesome 5 Free";
	content: "\f500"; 
	font-weight: 900;
	display: inline-block;
	width: 40px;
	text-align: center;
	margin-left: -40px;
}

dans une balise

<x class"icone-faw">... </x>

Modifié par HDcms (28 Oct 2022 - 17:32)

HDcms a écrit :

Je n'ai pas compris, car j'applique la copie du code telle que mis sur le site https://fontawesome.com/icons/user-group?s=solid&amp;f=classic
Si c'est une erreur du cms, cela risque d'être un peu lourd pour demander une correction

Il y effectivement une différence de version entre ce que tu as sur ton site et l'officielle de Font Awesome telle que présentée. Tu n'as pas moyen de la mettre a jour pour la v6 par exemple ?

HDcms a écrit :

En tout les cas j'ai remplacé par

<i class='fas fa-user-friends'></i>

cela n'a pas fonctionné

Quand je le rajoute à la volée sur ton site ca marche bien pourtant :

HDcms a écrit :

Du coup je me demandais , s'il y avait une méthode plus générique pour utiliser content: "\f500"; du style

.icone-faw {
  	font-family: "Font Awesome 5 Free";
	content: "\f500"; 
	font-weight: 900;
	display: inline-block;
	width: 40px;
	text-align: center;
	margin-left: -40px;
}

dans une balise

<x class"icone-faw">... </x>

Oui mais pas exactement, le content est sur le ::before. Regarde le code de Font Awesome et refait pareil. Mais a ce compte la tu as aussi vite fait d'importer font awesome toi meme, ca sert a rien de réécrire ça...

Bonjour
je ne sais pas pourquoi cela n'a pas fonctionné (navigateur ?)
En tout les cas, non je ne peux pas passer à la v6.x (j'ai déjà ici d'essayer cela) ou importer font awesome
Il y a même la réponse d'un dev du core joomla https://github.com/joomla/joomla-cms/pull/36906#issuecomment-1245807206 qui dit que ce n'est pas si simple

je n'arrive pas à faire un équivalent du "content" pour insérer le "\f500" ?
Après je ne sais pas si c'est aussi passe partout de le faire avec le glyph ou le svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome -  https://fontawesome.com  License -  https://fontawesome.com/license  (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M352 128c0 70.7-57.3 128-128 128s-128-57.3-128-128S153.3 0 224 0s128 57.3 128 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2h61.4C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z"/></svg>

En tout les cas si tu sais où quelqu'un voit une autre piste d'intégration qui contournerait les problèmes rencontrés ?

maj: j'ai l'impression que ces 2 dernières méthodes sont pour les versions pro ?
Modifié par HDcms (31 Oct 2022 - 15:21)

Re
je pense avoir trouvé un début de solution * . Néanmoins, il faudrait que j'affiche une icone selon la catégorie ou l'on se trouve.

Voir https://cochanger.eu/site-web/communaute/savez-vous-planter-chez-nous ou j'affiche l'icone grâce à

.separateur h2::before {
/*border:10px dotted black;*/
 font-family: "Font Awesome 5 Free";
	content: "\f500"; 
	font-weight: 900;
	display: inline-block;
	width: 40px;
	text-align: center;
	margin-left: -10px;
}

car l'icone avec <i classe="fa ... n'est pas reconnu
mais l faudrait que je prenne la condition du fil de navigation

... <a href="/[b]site-web/communaute[/b]" class="pathway"><span>Communautés</span></a> ...

Avec https://cochanger.eu/site-web/annuaire-carte-lieu/liste-de-repair-cafe ou il faudrait que je prenne la condition du fil de navigation

... <a href="/[b]site-web/annuaire-carte-lieu[/b]" class="pathway"></a> ...

*

re
Super
Merci
Cela permet de résoudre les soucis d'incohérence entre affichage sur blog et article dans d'autres catégories