Añadir un icono Font Awesome en un encabezado con CSS

Añadir un icono Font Awesome en un encabezado con CSS

¿Tienes un blog en Internet? ¿Te gustaría personalizar tus encabezados con iconos Font Awesome automáticamente? Hoy vamos a ver como añadir un icono Font Awesome en un encabezado con CSS automáticamente sin tener que añadirlo manualmente cada que tengamos un nuevo h1, h2, h3, etc.. ¿Quieres aprender como hacerlo? Sigue leyendo..

Hoy vamos a ver como añadir un icon font awesome en un encabezado HTML automáticamente con CSS, espero y te sirva.

Hace poco vimos como agregar botones sociales al RSS de nuestro wordpress y siguiendo con nuestra costumbre de optimizar a FULL nuestro WordPress hoy vamos a darle un estilo propio a nuestros encabezados HTML.

¿Qué es un encabezado HTML?

Un encabezado HTML es una etiqueta que permite resaltar un texto del texto regular.


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

Existen 6 tipos o niveles de encabezados HTML: H1 – H2 -H3 – H4 -H5- H6 siendo h1 el más grande y el que más se resalta del resto, h5 es el menos grande de todos.

Puedes hacer uso de estos encabezados a lo largo de tu sitio web dependiendo de cuanto deseas resaltar un texto dentro de tu contenido.

Hablando en cuestiones de diseño y SEO únicamente debes de utilizar un encabezado H1 para marcar el titulo de la página.

Los encabezados H2 deben de ser los temas a tratar en un post o página y los h3 deben de ser subtemas dentro de los H2 y asi sucesivamente.

¿Cómo añadir un icono Font Awesome en un encabezado con CSS?

Antes que nada necesitamos incluir la librería de Font Awesome e identificar que Icono nos gustaría para incluir en por ejemplo todos los H2.

Para esto necesitas ingresar al catálogo de iconos de Font Awesome y elegir el que más te guste.

En mi caso he elegido un apuntador web.

Como puedes ver nos da nuestro codigo html:

<i class="fa fa-hand-o-right" aria-hidden="true"></i>

Este código lo usariamos si quisieramos agregarlo manualmente en nuestro sitio web.

Nosotros al incluirlo mediante CSS necesitamos un código unicode, este codigo también nos lo da la página aunque un poco menos visible:

Este código unicode vamos a guardarlo pues lo necesitaremos más adelante.

Para añadir un icono font awesome en un encabezado automáticamente sin tener que estarlo añadiendo manualmente, cada que agregemos un encabezado tendremos que modificar nuestro estilo CSS del sitio.

Agregamos un estilo similar a éste:

h2:before {
	content: "\f0a4";
	font-family: FontAwesome;
}

¡Sustituye tu propio código unicode y listo!

De esta forma se agregará automáticamente el icono font awesome antes de cada h2, puedes hacer lo mismo para cualquier encabezado.

Por ejemplo en esta entrada se verá algo similar a esto:

¿Genial no? ¡Ahora no tenemos que hacer esto manualmente para cada h2!

Espero y este corto, pero útil post fuera de utilidad, si fue así te pido compartirlo en tus redes sociales y dejarnos un comentario, siempre es bueno saber de tí.

¡Saludos!

Clic para valorar esta información
[Total: 1 Promedio: 5]