Icone Fontawesome dans menu
Comment faire ?
Créations de Thèmes
vtt64 Membre non connecté
Booster Roquette
- Booster Roquette
- Voir le profil du membre vtt64
- Inscrit le : 16/12/2009
- Site internet
- Groupes :
J'ai bien essayé depuis l'administration d'attribuer des icônes fontawesome à mes menus mais sans succès.
<a href="/wiki/wiki.php?title=la-bibliotheque-font-awesome">https://www.phpboost.com/wiki/wiki.php?title=la-bibliotheque-font-awesome</a>
Je suppose qu'il faut passer par du codage.
Une demande d'amélioration avait été formulée.
<a href="/bugtracker/detail/1646">https://www.phpboost.com/bugtracker/detail/1646</a>
Merci
janus57 Membre non connecté
- Booster Fusée
- Voir le profil du membre janus57
- Inscrit le : 07/12/2007
- Groupes :
- Equipe Assistance
cela n'est actuellement pas possible (sinon la demande d'amélioration serait en "Etat : Corrigé") sauf à passer via du BBCode dans les menu de contenus.
Cordialement, janus57
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
vtt64 Membre non connecté
Booster Roquette
- Booster Roquette
- Voir le profil du membre vtt64
- Inscrit le : 16/12/2009
- Site internet
- Groupes :
ElenWii :
On doit pouvoir s'en sortir avec des bidouilles CSS avec les nt-child en attendant
J'espérais un code magique à mettre directement dans le champ image
Je vais trouver une autre solution
Merci
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
vtt64 Membre non connecté
Booster Roquette
- Booster Roquette
- Voir le profil du membre vtt64
- Inscrit le : 16/12/2009
- Site internet
- Groupes :
L'idéal serait de placer les icônes à gauche des textes repérés par les flèches, je fais référence au menu final.
Pas besoin dans les sous-menus.
Avec dans l'ordre :
Merci
olivierb Membre non connecté
- Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
- Equipe Assistance
Il y aurait peut-être une autre solution : utiliser la version png des icônes FA.
Un site bien fait http://fa2png.io/ sur lequel tu peux gérer la couleur, la taille et la transparence de l'image
Olivier.
Édité par olivierb Le 08/09/2017 à 16h03
Olivier
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
design.css :
#sub-header-content .level-0 li > .cssmenu-title:before { display: inline-block; font-family: FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 30px; } #sub-header-content .level-0 > li:nth-child(1) > .cssmenu-title:before { content: "\f1ea"; } #sub-header-content .level-0 > li:nth-child(2) > .cssmenu-title:before { content: "\f0c0"; } #sub-header-content .level-0 > li:nth-child(3) > .cssmenu-title:before { content: "\f07a"; } #sub-header-content .level-0 > li:nth-child(4) > .cssmenu-title:before { content: "\f073"; } #sub-header-content .level-0 > li:nth-child(5) > .cssmenu-title:before { content: "\f041"; } #sub-header-content .level-0 > li:nth-child(6) > .cssmenu-title:before { content: "\f0ac"; } #sub-header-content .level-0 > li:nth-child(6) > .cssmenu-title:before { content: "\f0e0"; }
Eventuellement, adapte le
#sub-header-content
en fonction de la position de ton menu.
vtt64 Membre non connecté
Booster Roquette
- Booster Roquette
- Voir le profil du membre vtt64
- Inscrit le : 16/12/2009
- Site internet
- Groupes :
@ElenWii : mis code dans design.css du template, vider cache, rien n’apparaît. Je vérifie ...
@Olivier : Surement le plus simple pour moi à implémenter, belle découverte
Edit : @ElenWii: j'ai des cssmenu.css
Édité par vtt64 Le 08/09/2017 à 18h23
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
ElenWii :
Eventuellement, adapte le
#sub-header-content
en fonction de la position de ton menu.Sur ton site ce sera :
#top-header-content
vtt64 Membre non connecté
Booster Roquette
- Booster Roquette
- Voir le profil du membre vtt64
- Inscrit le : 16/12/2009
- Site internet
- Groupes :
Merci ElenWii
En attendant de tout comprendre, je vais laisser les fa convertie en png proposé par Olivier
olivierb Membre non connecté
- Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
- Equipe Assistance
Va falloir trouver le moyen d'élargir le cadre dans lequel se trouve le menu car avec l'ajout des images, le texte sort du cadre (voir Petites Annonces).
Olivier.
Olivier
vtt64 Membre non connecté
Booster Roquette
- Booster Roquette
- Voir le profil du membre vtt64
- Inscrit le : 16/12/2009
- Site internet
- Groupes :
olivierb :
Bonsoir,
Va falloir trouver le moyen d'élargir le cadre dans lequel se trouve le menu car avec l'ajout des images, le texte sort du cadre (voir Petites Annonces).
Olivier.
Va falloir trouver le moyen d'élargir le cadre dans lequel se trouve le menu car avec l'ajout des images, le texte sort du cadre (voir Petites Annonces).
Olivier.
Olivier,
J'ai bien vu et je cherche encore...
vtt64 Membre non connecté
Booster Roquette
- Booster Roquette
- Voir le profil du membre vtt64
- Inscrit le : 16/12/2009
- Site internet
- Groupes :
J'ai abandonné l’intégration du code d'ElenWii (Merci) mais je n'y arrive pas.
Citation :
Va falloir trouver le moyen d'élargir le cadre dans lequel se trouve le menu car avec l'ajout des images, le texte sort du cadre (voir Petites Annonces).
J'ai passé à 30px mais ce n'est pas la bonne solution le texte n'est pas centré. Pas trouvé mieux à faire.
Si vous avez la solution pour centrer/aligner texte et image, merci !
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
padding: 11px 50px 11px 15px;
et pour mon cote, j'ai adapté à ton site en testant en live sur ton site :
Code CSS :
#top-header-content .level-1 > li { position: relative; } #top-header-content .level-1 > li:before { display: inline-block; font-family: FontAwesome; font-size: 22px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 30px; position: absolute; z-index: 1; top:13px; left:15px; } #top-header-content .level-1 > li:nth-child(1):before { content: "\f1ea"; } #top-header-content .level-1 > li:nth-child(2):before { content: "\f0c0"; } #top-header-content .level-1 > li:nth-child(3):before { content: "\f07a"; } #top-header-content .level-1 > li:nth-child(4):before { content: "\f073"; } #top-header-content .level-1 > li:nth-child(5):before { content: "\f041"; } #top-header-content .level-1 > li:nth-child(6):before { content: "\f0ac"; } #top-header-content .level-1 > li:nth-child(7):before { content: "\f0e0"; }
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie