InicioTutoriales de WordPressCómo añadir iconos font-awesome en custom post types del dashboard

Cómo añadir iconos font-awesome en custom post types del dashboard

 

 

Ejemplo para ver cómo podemos añadir o cambiar los iconos de custom post types de nuestro dashboard o panel de administración de WordPress, por iconos de la Font Awesome.

 

Descripción

A veces, cuando instalamos plugins o themes, se nos añaden diferentes custom post types en el panel de adminsitración o dashboard de nuestro WordPress, según de qué trate ese theme o plugin.

Por ejemplo, muchos themes de WordPress, vienen incorporados con las secciones comúnmente conocidas de:

  • Testimonios
  • Portfolio
  • Galería
  • Servicios
  • etc

y a veces, o tienen un icono más feo que un troll de mordor (jeje :mrgreen: ), o un icono muy complicado de diferenciar con los demás apartados, o directamente viene con el icono por defecto como podemos apreciar en la siguiente imagen:

custom post types

 

Para cambiar estos iconos, simplemente podríamos utilizar el parámetro menu_icon en la función register_post_type de WordPress donde hayamos creado esos custom post types, y ponerle o un icono de la fuente oficial de WordPress Dashicons o una imagen de un icono que tengamos en nuestro theme:

 

<?php
/* Con icono de dashicons */
		register_post_type( $post_type,
			array(
				
				'menu_icon' => 'dashicons-format-quote',

			)
		);

 

<?php
/* Con icono de una imagen */
		register_post_type( $post_type,
			array(
				
				'menu_icon' => 'get_template_directory_uri() . "/images/custom-posttype-icon.png"',

			)
		);

 

Con iconos de font-awesome

Como hemos visto anteriormente, podemos ponerle o iconos de la fuente dashicons, o un icono de una imagen. Pero, ¿y si quisiéramos ponerle un icono de la fuente Awesome?.

Seguramente pensarías, pues fácil, incluyo la fuente en la cabecera de mi theme, y en el parámetro menu_icon de la función register_post_type le pongo el nombre de dicho icono de font-awesome:

'menu_icon' => 'fa fa-car'

Pues he de decirte, que eso no te va a funcionar. Para que te funcione, tenemos que hacerlo con los siguientes códigos que te pongo a continuación.

 

 

Códigos

Cargar font-awesome

Lo primero que haremos es cargar la fuente Awesome. Para ello, añadiríamos al archivo functions.php de nuestro theme, este código:

 

<?php
function cargar_admin_fonts() {
 

 wp_enqueue_style( 'awesome', 'http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css' );
 

};
add_action( 'admin_init', 'cargar_admin_fonts' );

 

Función de custom css

Ahora necesitamos añadir de nuevo en el archivo functions.php, el código css del icono de font-awesome para cada custom post type:

 

<?php
function custom_post_types_css() {
   echo '<style type="text/css" media="screen">
	   #adminmenu #menu-posts-nombrecustomposttype .menu-icon-nombrecustomposttype div.wp-menu-image::before {
			font-family:  FontAwesome !important;
			content: "\\unicode";
			color: #FF0000;
		}
		
	 </style>';
}		

add_action( 'admin_head', 'custom_post_types_css' );

 

Por ejemplo, para los custom post que vimos anteriormente en la imagen (portfolio, servicios, testimonials), el código sería así:

 

<?php
function custom_post_types_css() {
   echo '<style type="text/css" media="screen">
	   #adminmenu #menu-posts-portfolio .menu-icon-portfolio div.wp-menu-image::before {
			font-family:  FontAwesome !important;
			content: "\\f0b1";
			color: #FFBF00;
		}
	   #adminmenu #menu-posts-servicios .menu-icon-servicios div.wp-menu-image::before {
			font-family:  FontAwesome !important;
			content: "\\f0ad";
			color: #00BFFF;
		}
	   #adminmenu #menu-posts-testimonials .menu-icon-testimonials div.wp-menu-image::before {
			font-family:  FontAwesome !important;
			content: "\\f10e";
			color: #FF0000;
		}		
	 </style>';
}		

add_action( 'admin_head', 'custom_post_types_css' );

 

 

Vista Previa

La vista previa una vez añadidos los códigos descritos anteriormente, daría como resultado:

custom post types

 

 

 

¿TE HA GUSTADO ESTE TUTORIAL?
[ Valoración: 5 - Votos: ‎1 ]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba