web-dev-qa-db-fra.com

Comment ajouter des icônes Awesome Font aux menus WordPress?

Comment ajouter des icônes Awesome Font aux menus WordPress

plugin-developmenttheme-development
3
Chirag Pipariya

Je suppose que vous souhaitez ajouter des icônes personnalisées au tableau de bord? Avec la dernière mise à jour de Wordpress vers 3.8, les icônes du tableau de bord ont changé. Ils sont maintenant en fait une police. En fait, c’est plutôt cool, car les polices peuvent facilement changer de couleur avec css et sont de taille plus réactive.

Je vais d'abord vous dire comment ajouter une icône personnalisée à l'aide des dashicons prédéfinis créés par l'équipe MP6 (développeurs du dernier tableau de bord). Rendez-vous sur http://melchoyce.github.io/dashicons/ pour afficher tous les dashicons actuellement disponibles. Si vous souhaitez modifier un élément de menu actuel, cette fonction vous permet de le faire. Ajoutez ceci au fichier functions.php de vos thèmes ou à votre plugin personnalisé. Cela changerait l'icône par défaut du menu "Messages":

function custom_post_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            content: '\\f337'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

Si vous souhaitez ajouter une icône pour un type de publication personnalisé, il en va à peu près de même avec une petite modification:

function cptname_custom_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-cptname div.wp-menu-image:before {
            content: '\\f337'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'cptname_custom_css');

Insérez le nom de votre type de message personnalisé à la place de "cptname". Maintenant la torsion. Nous devons ajouter une classe à notre type de message personnalisé css. Pour ce faire, nous ajoutons simplement une ligne de code à notre hook d’enregistrement de type de publication personnalisé:

'menu_icon' => '',

Donc, tout notre crochet d’enregistrement ressemble à ceci:

$args = array(
 'labels' => $labels,
 'menu_icon' => '',
 'public' => true,
 'publicly_queryable' => true,
 'show_ui' => true, 
 'show_in_menu' => true, 
 'query_var' => true,
 'rewrite' => true,
 'capability_type' => 'post',
 'has_archive' => true, 
 'hierarchical' => false,
 'menu_position' => null,
 'supports' => array('title', 'editor', 'thumbnail')
); 
 register_post_type('cptname',$args);
}

Maintenant, si vous voulez utiliser les superbes icônes de police, il vous suffit de les télécharger sur notre thème. Téléchargez la police et placez les fichiers CSS et les polices dans le dossier approprié de votre thème actuel. Ensuite, nous devons ajouter un peu plus de code à notre fichier themes.php ou à votre plugin personnalisé:

function my_custom_fonts() {
<style>
 @font-face {
     font-family: FontAwesome;
     src: url(/path-to-font-folder/fontawesome-webfont.woff);
 }
</style>
}

add_action('admin-init', 'my_custom_fonts');

Et maintenant, nous utilisons le code ci-dessus pour sélectionner de manière sélective nos nouvelles icônes. Cela changerait encore une fois l’icône du menu "Messages" en utilisant le jeu d’icônes FontAwesome:

function custom_post_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            font-family:  FontAwesome !important;
            content: '\\fa-Apple'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

J'espère que cela vous aide. Je n'ai pas encore utilisé les superbes icônes de police, mais j'ai déjà personnalisé mes icônes de tableau de bord. J'aime la dernière révision du tableau de bord, mais il y a une courbe d'apprentissage.

Je viens de faire un montage: j'ai essayé certaines choses ici et en fait j'ai utilisé les superbes icônes de polices sur mon propre site:

ajoutez ceci à votre functions.php ou à votre plugin:

function font_admin_init() {
   wp_enqueue_style('font-awesome', 'http://netdna.bootstrapcdn.com/fontawesome/3.1.1/css/font-awesome.css'); 
}

add_action('admin_init', 'font_admin_init');

puis ajoutez ceci pour sélectionner l'icône actuelle:

function custom_post_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            font-family:  FontAwesome !important;
            content: '\\f0f2'; // this is where you enter the fontaweseom font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

Vous pouvez trouver les codes listés dans le fichier css.

5
RiotAct

Pour Front End, j'utilise ceci:

// Add font awesome CSS http://fortawesome.github.io/Font-Awesome/examples/
function awesome_css() {
    wp_enqueue_style("fontawesome", 'http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');
}
add_action( 'wp_enqueue_scripts', 'awesome_css' );

Pour ajouter dans Admin, regardez ici: https://github.com/raket/fontawesome-for-wordpress/blob/master/fontawesome.php qui semble avoir une solution qui fonctionnerait

2
TomC

Exemple pas à pas avec FontAwesome:

Y compris les types de couleur et de type personnalisé ????

1 Choisissez une icône

2 Obtenez le SVG

Amenez le SVG dans Wordpress

  • Dans votre functions.php, où vous enregistrez votre type d'article personnalisé, ajoutez l'extrait de code suivant:

    add_action('init', 'my_init');
function my_init() {
    register_post_type('labs', [
        'label' => 'Labs',
        // .. ect
        'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode('<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M1591 1448q56 89 21.5 152.5t-140.5 63.5h-1152q-106 0-140.5-63.5t21.5-152.5l503-793v-399h-64q-26 0-45-19t-19-45 19-45 45-19h512q26 0 45 19t19 45-19 45-45 19h-64v399zm-779-725l-272 429h712l-272-429-20-31v-436h-128v436z"/></svg>')
     ]);
}

Notes importantes:

  • Le contenu de base64_encode est la chaîne brute copiée de la page github de Font Awesomes.
  • Vous devez changer deux petites choses dans la chaîne svg:
    • 1: Ajouter un attribut fill="black" aux éléments path/s - cela permet à la couleur d'être modifiée par Wordpress.
    • 2: (facultatif) Modifiez la largeur et la hauteur sur 20, car il s'agit de la largeur/hauteur de l'administrateur et semble en résulter un résultat plus net.

 enter image description here 

0
Chris