FontAwesome dans la barre de navigation

[Poshy]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :

Description du problème

Bonjour !
Je fais face à un petit dilemme en voulant modifier ma barre de navigation. J'ai bien suivi le tutoriel pour mettre des icons FontAwesome dans la barre de navigation, ce qui marche plutôt bien, excepté pour la déconnexion, car je ne connais pas l'url qui y est rattachée.
Mon principal problème est que j'aimerai que mon icon FontAwesome se trouve au-dessus de chaque lien de la barre de navigation, comme montré sur le screen.

Code:

a.mainmenu[href="/privmsg?folder=inbox"] { position:relative }
a.mainmenu[href="/privmsg?folder=inbox"]:before, a.mainmenu[href="/privmsg?folder=inbox"]::before {
  content:"";
  color:#666;
  font-family:FontAwesome;
  display:block;
  font-size:13px;
  margin:0 10px;
}

Je pensais que mettre un display:block me permettrait de le faire, sauf que c'est toute la ligne qui saute, hors, j'aimerai que ma barre de navigation reste droite...

Merci de votre aide !

[mSyx]

Hello o/
Possible d'avoir le lien du forum ? ^^

[Poshy]

Tiens donc ! J'ai mis un display block sur le lien du profil et comme tu vois, ça casse un peu tout

[mSyx]

Re o/
Le CSS suivant fonctionne de mon côté:

Code:

a.mainmenu img {
    display: none; }

a.mainmenu {
    top: 5px; }

a.mainmenu[href="/"]::before {
    color: rgb(102, 102, 102);
    content: "";
    font-family: FontAwesome;
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    position: absolute;
    top: -13px;
    left: 0;
    width: 100%;
    text-align: center; }

Il n'y a que l'index, pour voir déjà si c'est bien ça que tu recherches :>
D'ailleurs, petite suggestion qui pourrait rendre le code plus clair:

Au lieu de remettre entièrement le CSS pour chaque a différent de la nav, tu pourrais tout rassembler en un et juste modifier l'icône au cas par cas. En exemple:

Code:

a.mainmenu::before {
    color: rgb(102, 102, 102);
    font-family: FontAwesome;
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    position: absolute;
    top: -13px;
    left: 0;
    width: 100%;
    text-align: center; }

a.mainmenu[href="/"]::before {content: "";}
a.mainmenu[href="/memberlist"]::before {content: "";}
etc.

[Poshy]

Merci beaucoup ! En bidouillant, j'ai pu avoir ce que je voulais, car ton css ne marchait pas étrangement ? Mais ça marche nickel maintenant !
J'ai une dernière question cependant : sais-tu quel href je dois utiliser pour viser le lien de Déconnexion dans la barre de navigation ?

[mSyx]

car ton css ne marchait pas étrangement ? Mais ça marche nickel maintenant !

Ah; je n'ai collé que le CSS que j'avais ajouté; mais si tu as remplacé ton CSS déjà existant avec mes codes adéquats, il se peut que quelques propriétés aient du coup été retirées et que ça fonctionne pas comme prévu :b

J'ai une dernière question cependant : sais-tu quel href je dois utiliser pour viser le lien de Déconnexion dans la barre de navigation ?

Pour ça, on doit utiliser un sélecteur CSS qui ne prendra qu'une partie du lien. En l'occurrence, ce sera: ^ -qui signifie, grossomodo, "commence par". Ça donnerait ça:

Code:

a.mainmenu[href^="/login?logout="] {css}

[Poshy]

Ah; je n'ai collé que le CSS que j'avais ajouté; mais si tu as remplacé ton CSS déjà existant avec mes codes adéquats, il se peut que quelques propriétés aient du coup été retirées et que ça fonctionne pas comme prévu :b

Tant que ça marche

Merci beaucoup pour ton aide et la petite explication, tout marche parfaitement désormais

[mSyx]

Au plaisir ! :b