Botones HTML con iconos Dashicons y Font Awesome

Aprende en este artículo a crear botones con iconos Dashicons y Font Awesome.

¿Te gusta trabajar con iconos? Sigue leyendo porque te voy a explicar cómo puedes crear botones HTML con iconos Dashicons y Font Awesome.

Te recomiendo ver el siguiente vídeo para más detalles sobre la implementación de botones con iconos y con nociones básicas acerca de la modificación del aspecto visual de un blog en WordPress.

En este vídeo se explica:

  • Cómo añadir código en la cabecera HTML del blog.
  • Una forma de modificar el CSS sin necesidad de conocer dónde se encuentra el archivo ni editar el archivo.
  • Dónde se puede añadir código HTML en WordPress.

 Haz una pregunta

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.

¿Qué son los iconos Dashicons?

dashicons-1 Botones HTML con iconos Dashicons y Font Awesome

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:

[code lang=”HTML”]
<span class="dashicons dashicons-admin-generic"></span>
[/code]

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

dashicons-2 Botones HTML con iconos Dashicons y Font Awesome

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:

[code lang=”css”]
.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;
}
[/code]

Cuya explicación es la siguiente:

[code lang=”css”]
.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)
}
[/code]

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:

[code lang=”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>
[/code]

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

dashicons-3 Botones HTML con iconos Dashicons y 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.

dashicons-4 Botones HTML con iconos Dashicons y Font Awesome

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>:

[code lang=”HTML”]
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
[/code]

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”).

¿Te gustó este post?
Compártelo en redes sociales

6 comentarios

  1. Hola, gracias por este tutorial, es exactamente lo que estoy buscando pero lo necesito para botones input, ya que me gustaría añadir iconos en botones de paypal. Hay alguna manera de hacerlo? Lo he probado intentando poner el span dentro de value, pero se me rompe el código. Espero que puedas ayudarme. Gracias!!!

  2. Gracias bro! Me sirvió de mucha ayuda! Saludos!

  3. ANICAMA TASAYCO Jonathan Romulo

    buenas el icono de blogger como lo puedo encontar

Deja un comentario

Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a SiteGround que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido