icone fontawesome dans le titre

**Cosmic** · 12/11/2019, 13h40

je continue à découvrir Universal Plugin de Lomart et je crois que ça pourrait m'aider

UP-LOMART - addClass ~ ajoute une classe à une balise ou son parent

https://up.lomart.fr/demo/action-addclass

**jps0302** · 12/11/2019, 14h08

Bonjour

J'espère avoir bien compris le fond du problème..

je viens de faire le test suivant pour ajouter une font à un titre avec le code suivant :

<h2 style="text-align: center;"><span style="font-family: arial, helvetica, sans-serif; font-size: 24pt; color: #ff6600;"><i class="fa fa-question" style="color: #ff6600;"></i>Le Titre...</span></h2>

Cela fonctionne.

Était ce bien cela le souci ?

**pmleconte** · 12/11/2019, 14h28

Bonjour,

Il suffit, dans votre menu, onglet Type de Liens, dans Style CSS du lien, de mettre fa-home par exemple pour avoir la "maison" devant votre libellé de menu, si toutefois, votre template utilise les icônes FontAwesome.

Pascal

**jps0302** · 12/11/2019, 14h34

../..
J'avais compris dans l’énoncé du problème de Cosmic que la font <i class="fa fa-question" style="color: #ff6600;"></i>, devait être implémentée dans le titre d'un article et non pas devant un lien de menu ....

Qu'en est-il ?

**Cosmic** · 12/11/2019, 14h37

J’ai du mal m’exprimer, c’est devant la balise <h1> du titre que je voudrais cette icone.
Pas de souci dans le corps de l’article puisqu'on y insert tout le code html qu'on veut ou dans le menu…

(je n'ai pas mis la capture d'écran parce que c'est un peu différent à cause de FlexiContent)

le hic, c'est que comme c'est un champ core de J!, je ne peux pas y rajouter une classe (sauf erreur de ma part), hors tous les titres n'auront pas la même icone...

suis-je plus clair?

**jps0302** · 12/11/2019, 14h49

../..
Et si vous n'affichez pas le titre et que vous inserez le titre dans le corps de l'article avec le code suivant :

<h1 style="text-align: center;"><span style="font-family: arial, helvetica, sans-serif; font-size: 24pt; color: #ff6600;"><i class="fa fa-question" style="color: #ff6600;"></i>Le Titre...</span></h1>

Le résultat n'est pas le même ?

**Cosmic** · 12/11/2019, 16h50

Nope – j'y ai pensé aussi mais il y a les différentes informations concernant l’auteur de l’article, les dates, catégories…

**Cosmic** · 12/11/2019, 16h54

bon OK je vais creuser ce soir deux solutions:
- FlexiContent qui me permettrait peut-etre de changer un peu le template
- la solution UP de Lomart

mais je vais regarder aussi si je ne peux pas solutionner le probleme avec une balise <head> en plus du <h1> pour le faire "remonter" dans la liste...

merci en tout cas pour votre aide

**pmleconte** · 12/11/2019, 19h23

J'avais effectivement mal compris la question.

Je viens d'essayer avec UP et cela semble fonctionner.

J'ai mis dans un de mes articles {up addCssHead=h1::before[content:"\f26e" !important;font-family: FontAwesome]}

Dans un autre, j'ai mis {up addCssHead=h1::before[content:"\f0f9" !important;font-family: FontAwesome]} et j'ai bien 2 icônes différents sur chacun de mes titres.

Le problème est de trouver à chaque fois la bonne valeur dans content.

Sur la page https://up.lomart.fr/liste-icofont/icones-font-awesome, il faut aller chercher avec l'inspecteur la valeur de content dans la commande :before.

Pascal

**Cosmic** · 12/11/2019, 23h10

<p>{up addCssHead=h1::before[content:"\f24e" !important;font-family: "Font Awesome 5 Free"]}</p>

grrrr ça ne fonctionne pas mais avec mon templte, je dois utiliser une autre version

**Eddy.vh** · 13/11/2019, 07h15

Bonjour.

Quelle version de Font Awesome est chargée par ton site ou tes CSS ?
C'est cette version qu'il faut utiliser.

pour trouver l'icône adéquate, il suffit de faire une courte recherche sur le site éditeur et on obtient son code aussitôt.

**lomart** · 13/11/2019, 07h35

Bonjour,

Il faut essayer :

Code:

<p>{up addCssHead=h1:before[content:"\f24e" !important;font-family: "Font Awesome 5 Free"]}</p>

avec un seul double-point devant le before

**Cosmic** · 13/11/2019, 09h41

Envoyé par lomart Voir le message

Bonjour,

Il faut essayer :

Code:

<p>{up addCssHead=h1:before[content:"\f24e" !important;font-family: "Font Awesome 5 Free"]}</p>

avec un seul double-point devant le before

Bonjour Lomart,
l'icone ne s'affiche toujours pas malheureusement même avec 1 seul ":"

https://smlcol.ovh/en/content_page/blabla/faq/faq-frequently-asked-questions?preview=2

pour info, j'arrive a les afficher par ailleurs...

**Cosmic** · 13/11/2019, 09h47

Envoyé par Eddy.vh Voir le message

Bonjour.

Quelle version de Font Awesome est chargée par ton site ou tes CSS ?
C'est cette version qu'il faut utiliser.

pour trouver l'icône adéquate, il suffit de faire une courte recherche sur le site éditeur et on obtient son code aussitôt.

Oui Eddy, c'est pour ça que j'ai changé ma ligne de code corrigée avec la font-family comme dans les lignes de code qui fonctionnent

bon maintenant j'ai pu me tromper qq part...

<p>{up addCssHead=h1::before[content:"\f24e" !important;font-family: "Font Awesome 5 Free"]}</p>

icone fontawesome dans le titre

[RÉGLÉ] icone fontawesome dans le titre

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association