Un menu top classe avec JM DS

10-02-2014 - 331 mots - temps de lecture estimé ~ 1 minute

Voir le post

Il y a peu de temps, j’ai sorti un plugin vous permettant d’utiliser la magnifique font Dashicons sur votre site en front-end donc et non plus seulement en admin. Aujourd’hui on va voir comment créer un choli menu comme le mien avec le plugin.

Pour commencer, téléchargez le plugin sur WordPress.org et activez-le.

Comment fonctionne le plugin?

Le plugin rajoute un shortcode à WordPress qui permet de paramétrer les icônes et de les utiliser dans les posts, les widgets et les menus.

Pour voir l’explication en détails c’est ici.

Comment paramétrer le menu?

Il suffit de rajouter le shortcode avant les noms des items de menu directement dans les box dédiées.

Le nom des classes à mettre dans le paramètre name est dispo via le bouton aide (le helper de WP en haut à droite) dans les listes que j’ai documentées que ce soit dans les admin de post ou des menus.

Vous pouvez régler la taille (en em) par défaut elle vaut 2em. Pour la couleur c’est pareil vous pouvez la customizer. Le reste se fera via CSS grâce au paramètre class.

Attention dans votre CSS, il est important d’attribuer une width et une height au conteneur de l’icône, donc ici à la classe que vous avez choisie pour le paramètre class. Je vous conseille les tailles carrées plutôt et ne mettez pas une taille inférieure à celle choisie pour la font avec le paramètre size. Donc la même valeur pour la width et la height. Vous pouvez jouer avec les margin pour le centrage ou pas.

À ajuster avec firebug.

Franchement c’est easy hun, et je trouve que le rendu sur les mobiles est pas trop mal.

Compatibilité

La font Dashicons n’est compatible que jusqu’à IE9 malheureusement. Je vous conseille donc d’opérer un display none sur IE8 pour éviter d’afficher des carrés vides…

Voici comment vous pouvez procéder : Source

Et dans le fichier CSS mettre : [css].dashicons:before { content: ‘’ !important; }[/css] C’est sympa et simple non?

comments powered by Disqus