glyphicon ou font awesome + JSN Boot

**PhilJ** · 03/01/2016, 18h49

Re : glyphicon ou font awesome + JSN Boot

Bonjour,

Envoyé par FlodAriege Voir le message

Ceux d'entre vous qui connaissent le css du template JSN Boot [...] pourraient-ils m'aider à comprendre pourquoi je n'arrive pas à faire fonctionner correctement les glyphicons (ou font awesome) dans les liens de menus de ce template ? [...]
Une idée de ce que je devrais changer dans le css d'origine ?

Il est normal que ces polices spéciales ne soient pas nativement utilisables avec JSN Boot : elles ne sont pas appelées dans la zone <HEAD>. Vois le code source de n'importe quelle page (= CTRL+U).

Pour utiliser des Glyphicons (ou Font Awesome, ou Icomoon, etc.), il faut au moins que la ou les polices en question soient appelées et donc rendue(s) disponible(s) pour l'affichage dans le contenu dans la zone <HEAD>...</HEAD>.

Bonne année également,

**FlodAriege** · 03/01/2016, 20h06

Re : glyphicon ou font awesome + JSN Boot

Envoyé par PhilJ Voir le message

Bonjour,

Il est normal que ces polices spéciales ne soient pas nativement utilisables avec JSN Boot : elles ne sont pas appelées dans la zone <HEAD>. Vois le code source de n'importe quelle page (= CTRL+U).

Pour utiliser des Glyphicons (ou Font Awesome, ou Icomoon, etc.), il faut au moins que la ou les polices en question soient appelées et donc rendue(s) disponible(s) pour l'affichage dans le contenu dans la zone <HEAD>...</HEAD>.

Bonne année également,

Bonjour PhilJ,

Oui, je sais bien, et j'ai déclaré le css de font-awesome il y a plusieurs mois. Mais j'imagine que JCH Optimize a intégré ce css dans son css unique, et donc la déclaration* a disparu.

Ce qui est assez bizarre, c'est que si j'insère par exemple 
dans le texte d'un article, l'icône de la calculatrice apparait sagement à l'endroit souhaité.

Par contre, si je veux l'afficher à côté d'un lien de menu, impossible !
Sous JSN Boot, il y a un champ 'classe du lien' dans lequel je peux, par exemple, saisir jsn-icon-calculator, et hop, une calculatrice s'affiche à gauche du lien de menu. (parce que j'ai pris soin d'ajouter un icone de calculatrice au sprite livré avec le template, et ajouté les instructions nécessaires à mon css).
Mais si je remplace de 'jsn-icon-calculator' par un 'fa fa-calculator'...
a) aucune icône ne s'affiche
b) la police du lien saute (il passe en times new roman)

C'est pour cela que je pense que c'est un truc spécifique au template de Joomlashine.
Ou pas ?

*déclaration :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
ajoutée dans le head.php du template

EDIT : pour trouver quelques pistes de réponse, je suis allée jeter un oeil aux nouveaux templates joomlashine.
Et bingo ! ils utilisent font-awesome, y compris dans les liens de menus.
J'ai regardé un peu le css, et j'y ai trouvé des trucs comme :

Code:

div.jsn-modulecontainer ul.menu-iconmenu li i[class*="fa-"] {
    padding: 3px 5px 0px;
}
div.jsn-modulecontainer ul.menu-iconmenu li i[class*="fa-"], div.jsn-modulecontainer ul.menu-iconmenu > li > a > span {
    float: left;
}
.jsn-bootstrap3 [class^="icon-"], [class*=" icon-"], .jsn-bootstrap3 [class^="fa-"], [class*=" fa-"] {
    margin-right: 8px;
    background-image: none;
}
.jsn-bootstrap3 [class^="fa-"], [class*=" fa-"] {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    font-size-adjust: none;
    font-stretch: normal;
    font-feature-settings: normal;
    font-language-override: normal;
    font-kerning: auto;
    font-synthesis: weight style;
    font-variant: normal;
    font-size: inherit;
    text-rendering: auto;
    transform: translate(0px, 0px);
}

Mais dans le code source des pages, je vois que les liens de menus sont encadrés d'un tag qui permet d'embarquer la classe fa
A ce que je sache, mon vieux template Joomlashine n'offre pas cette possibilité, mais peut-être est-e dans le code css susmentionné que cette directive est donnée ?

**lefabdu51** · 04/01/2016, 07h14

Re : glyphicon ou font awesome + JSN Boot

salut tu peut poster le code html de ton lien de menu ?
Car il y a un truc que tu as dit et qui m intrigues.

**FlodAriege** · 04/01/2016, 09h11

Re : glyphicon ou font awesome + JSN Boot

Envoyé par lefabdu51 Voir le message

salut tu peut poster le code html de ton lien de menu ?
Car il y a un truc que tu as dit et qui m intrigues.

Bonjour,

Oui bien sûr

Voici le code html des 2 liens de menu du top menu :

Code HTML:

<ul class="menu-topmenu menu-iconmenu">
<li  class="first jsn-icon-mail"><a  href="/contactez-rouch-energies.html" title=" formulaire" >
<span>
<span class="jsn-menutitle">Contact</span><span class="jsn-menudescription"> formulaire</span>	</span>
</a></li>
<li  class="last jsn-icon-calculator"><a  href="/devis-gratuit.html" title=" sans engagement" >
<span>
<span class="jsn-menutitle">Devis gratuit</span><span class="jsn-menudescription"> sans engagement</span>	</span>
</a></li></ul>

Merci d'avance,
Bonne journée,
Bonne année

Flo

**lefabdu51** · 04/01/2016, 14h15

Re : glyphicon ou font awesome + JSN Boot

je vois un li et non une balise .
Donc rien d etonnant a ce que cela ne fonctionnes pas.
pour fontawesome les declarations qui fonctionnent sont

Code:

<i class="fa fa-product-hunt"></i><span>Mon texte</span>

**FlodAriege** · 04/01/2016, 14h36

Re : glyphicon ou font awesome + JSN Boot

Ben oui, et c'est ce que je fais quand je veux insérer une icône dans le texte d'un article ou dans un bouton lien, mais pour les liens de menus, comme dirait l'autre, c'est pas moi qui choise.
Je ne vois donc pas comment je pourrais insérer ce tag .
C'est ce que je disais ici :

Envoyé par FlodAriege Voir le message

Mais dans le code source des pages, je vois que les liens de menus sont encadrés d'un tag qui permet d'embarquer la classe fa
A ce que je sache, mon vieux template Joomlashine n'offre pas cette possibilité, mais peut-être est-e dans le code css susmentionné que cette directive est donnée ?

J'ai bien essayé de le saisir comme du texte, mais rien à faire, Joomla le supprime.

glyphicon ou font awesome + JSN Boot

glyphicon ou font awesome + JSN Boot

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association