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 automaticamente? Hoy vamos a ver como añadir un icono Font Awesome en un encabezado con CSS automaticamente sin tener que añadirlo manuelmente 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 automaticamente 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.


Suscríbete!

Suscríbete a nuestra lista de correo y recíbe los últimos contenidos directamente en tu bandeja de correo electrónico, puedes elegir únicamente de que categoria del blog quieres recibir contenido.

Suscríbeme

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.

como añadir un icono font awesome en un encabezado con css 1

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 añadir un icono font awesome en un encabezado con css 2

Como puedes ver nos da nuestro codigo html:

Este codigo lo usariamos si quisieramos agregarlo manualmente en nuestro sitio web.

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

como añadir un icono font awesome en un encabezado con css 3

Este codigo unicode vamos a guardarlo pues lo necesitaremos más adelante.

Para añadir un icono font awesome en un encabezado automaticamente 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:

Sustituye tu propio codigo unicode y listo!

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

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

como añadir un icono font awesome en un encabezado con css 4

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!

 

Dejar un comentario

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