Discussion :

[Drake_Strife]

Bonjour à tous,

Etant novice dans le développement Web, je me permets de faire appel à des connaisseurs car je suis un peu bloqué. Voici mon problème :

Tout d'abord, il est bon de savoir que mon site est développé sous Wordpress, que vous trouverez à l'adresse suivante : https://easytrap.fr/
Après la dernière mise à jour, mes icônes dans le menu représentant une flèche vers le bas ont toutes disparu pour laisser place à un jolie carré... Malheureusement, même en inspectant la page je n'arrive pas à trouver d'où peut venir l'erreur. J'ai essayé d'éplucher le HTML et le CSS mais sans succès.

Quelqu'un aurait-il un indice qui pourrait m'aiguiller vers la solution ?

En vous remerciant par avance

[Toufik83]

Bonjour,

Il y'a deux solutions possibles :

• Soit Ajouter la class fa fa-chevron-down aux <a> ayant un menu et supprimer la propriété font-family: FontAwesome;, puis ajouter une règle css pour masquer le pseudo :before et ne garder que :after :
  

  Code css :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
   
  li.menu-item a.fa:before{display:none;}

• Soit modifier seulement l'entité de la propriété content de :after (liste des entités):
  

  Code css :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
   
  .menu-item > a:after {
      content: "\005E";
      transform: rotate(180deg);
  }

Résultat : Pièce jointe 598812

Attention, il y'a une erreur dans la console, qui est probablement relative au bug ...

[Drake_Strife]

Merci beaucoup pour ta réponse Toufik, je vais essayer ca !

[Drake_Strife]

Malheureusement cela ne fonctionne pas pour moi. Le bug persiste, je pense que cela vient du thème, mais impossible de le régler pour le moment.

Même en ajoutant !important, cela ne prend la modification en compte que pour certaines parties du menu et le rotate ne fonctionne (flèche vers le haut au lieu du bas).

[Drake_Strife]

Grâce à l'aide de Toufik, j'ai pu bidouiller quelque chose qui fonctionne pas trop mal :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#menu-item-76 > a:after, #menu-item-91 > a:after, #menu-item-92 > a:after
{
    content: "\005E";
    transform: rotate(180deg);
    margin-right: 0.5em;
    margin-top: -0.2em;
}

Par contre, cela ne fonctionne pas du tout en responsive. Dès que l'écran est petit et que le menu est redimensionné, cela ne fonctionne plus et les flèches restent tournées vers le haut.

Quelqu'un aurait-il une idée svp ?

[mathieu]

ce forum wordpress est principalement là pour le développement d'extension et de thème.
pour votre question, vous aurez peut-être plus d'aide en demandant là :
https://www.developpez.net/forums/f4...mise-page-css/