¿Te gusta trabajar con iconos? Sigue leyendo porque te voy a explicar cómo puedes crear botones HTML con iconos Dashicons y Font Awesome.
En este post aprenderás a trabajar con iconos pero antes déjanos por favor que te recomendemos un par de recursos.
Newsletter de Blogpocket
Estar suscrito a la newsletter de Blogpocket te permitirá estar a la vanguardia de la información sobre WordPress y el blogging.
Membresía de Blogpocket
La membresía gratuita de Blogpocket consta de artículos bajo registro y registrándote en Blogpocket obtendrás:
- Acceso gratuito y directo, todas las veces que quieras, a todos los artículos marcados con un candado.
¿Qué son los iconos Dashicons?
Hace ya bastante tiempo que en Blogpocket utilizamos los iconos, que vienen de serie en WordPrees.org, denominados Dashicons. Desde que WordPress los incorporó a la aplicación, es muy fácil añadirlos a tu blog.
Figura 1
Para ver el catálogo de iconos disponibles, entra en la página de recursos para desarrolladores. Haz clic en cualquier icono y en la parte superior de la pantalla verás una ampliación del mismo (ver figura 1).
A la derecha de la imagen ampliada (seguimos en la figura 1) observa un menú de enlaces. Haz clic en «Copy HTML» para ver una ventanita emergente con el código HTML correspondiente. En el caso del icono de la rueda dentada de la figura 1, el código es:
<span class="dashicons dashicons-admin-generic"></span>En principio, no hay inconveniente en que utilices otras etiquetas HTML que sirven también para escribir textos, como <i> o <p>. Pero, por supuesto, no te olvides de cerrar todas con </span>, </i> o </p>
Y, evidentemente, no hace falta que hagas clic en el enlace «Copy HTML» para obtener el código. Basta con conocer el nombre del icono: si por ejemplo, queremos mostrar el icono de la nota musical, solo hay que sustituir, en el código anterior, «dashicons-admin-generic» por «dashicons-format-audio».
Es muy fácil, por lo tanto, mostrar iconos en nuestro blog de WordPress.org, simplemente utilizando la etiqueta «span» y el parámetro «class» con los valores «dashicons» y el nombre del icono. Como hemos visto, para conocer el nombre del icono, solo hay que hacer clic en el que queramos, desde la página de recursos para desarrolladores de WordPress.
Cómo construir un botón HTML con iconos Dashicons
Figura 2
Construir un botón HTML que contenga uno de estos iconos, como los que utilizo en Blogpocket (ver figura 2), también es muy fácil. Requiere cocinar un poquito de código pero no es tan complicado.
Si te fijas en cualquiera de los botones, de ese estilo, que tengo en Blogpocket, al pasar el puntero del ratón por encima, el fondo cambia de color. Tanto eso, como el tamaño del botón y el color de fondo, antes de poner el puntero encima, hay que definirlo en el CSS.
Usaremos, básicamente y para el CSS, una clase denominada «button», cuyo código es el siguiente:
.button {
background-color: #13AFDF;
border-radius: 6px;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 16px 24px;
text-align: center;
text-transform: uppercase;
width: auto;
}
.button:hover {
background-color: #FB7E29;
color: #fff;
}Cuya explicación es la siguiente:
.button { <-- nombre de la clase, para referirnos a ella en el HTML
background-color: #13AFDF; <-- color de fondo del botón
border-radius: 6px; <-- borde redondeado del botón
border: none; <-- sin borde
color: #fff; <-- color del texto dentro del botón
cursor: pointer; <-- estilo del puntero
font-size: 16px; <-- tamaño del texto dentro del botón (y, consecuentemente, del botón mismo)
padding: 16px 24px; <-- espacio desde los límites del botón al texto que contiene (esto determina también el tamaño)
text-align: center; <-- texto centrado dentro del botón
text-transform: uppercase; <-- el texto se convierte siempre a mayúsculas
width: auto; <-- ancho del botón automático (según longitud del texto y espacios definidos)
}
.button:hover {
background-color: #FB7E29; <-- el botón cambia a este color cuando se pone el cursor encima)
color: #fff; <-- el texto del botón cambia a este color cuando se pone encima el cursor)
}Ahora lo único que se necesita es escribir un poquito de HTML allá dónde queramos mostrar el botón. Por ejemplo, dentro de un post (y para ello iremos al editor de entradas de WordPress) o en cualquier widget de texto del theme activo (para eso, acude a «Apariencia > Widgets»).
Escribe las siguientes líneas de código HTML:
<a class="button" style="font-size: 15px;" title="Aprende a crear un blog" href="https://www.blogpocket.com/como-crear-un-blog">
<span class="dashicons dashicons-admin-generic"></span>Crea un blog
</a>Con el parámetro «style» de la etiqueta <a> se modifica el tamaño del texto del botón, que por defecto lo pusimos a 16px en el CSS (como vimos anteriormente) y que aquí se fija un poquito más pequeño (15px).
Como también vimos al principio de esta entrada, la etiqueta <span> sirve para mostrar el icono Dashicons correspondiente.
Eso es todo lo que se requiere para poder mostrar botones HTML con iconos, tan elegantes como los que yo utilizo en Blogpocket.
Más iconos en Font Awesome
Figura 3
La única pega que existe con los iconos Dashicons de WordPress es que su catálogo se queda un poco corto. La página Font Awesome Icons (ver figura 3), sin ir más lejos, posee muchos más iconos y la forma de elaborar los botones HTML es muy similar.
Otra ventaja de Font Awesome, con respecto a los Dashicons de WordPress, es que te valdrían para cualquier sistema de publicación de blogs, siempre y cuando tengas acceso a los archivos HTML de la plantilla.
Figura 4
Como puedes comprobar si haces clic en cualquiera de los iconos de Font Awesome, el código HTML es el mismo que el empleado para los Dashicons (ver figura 4).
La implementación de los botones con iconos de Font Awesome es la misma que la de los Dashicons de WordPress, a excepción de que es preciso indicarle al blog dónde se encuentra el archivo CSS correspondiente.
Pero lo único que hay que hacer es incluir la siguiente etiqueta <link> en la cabecera HTML del blog, entre las etiquetas <head> y </head>:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">Existe la opción de descargarte el paquete que incluye el CSS en tu ordenador, desde la página principal de Font Awesome, y subirlo a tu servidor, tal como se explica en Get Started (apartado «EASY: Default CSS»).
Deja una respuesta