Si no has usado nunca una librería de iconos glifo como Font Awesome antes, en realidad estás perdiendo el tiempo. Son increíblemente útiles, flexible y son fáciles de implementar a través de markups. Con dicha librería tendremos acceso a cientos de iconos, sin necesidad de llamar a imágenes externas, solo mediante CSS podremos mostrar iconos con diseños genéricos y con una calidad extraordinaria. El método normal para el uso de Font Awesome es utilizando el tag <i> con una clase CSS del icono específico. A continuación te mostramos un ejemplo de cómo se utiliza normalmente FontAwesome:
<i class="icon-github"></i>
Esto funciona muy bien y no suele dar problema en la mayoría de los casos, pero ¿qué pasa si no quieres usar el tag <i> porque no estás de acuerdo con esa implementación o simplemente porque no puedes por motivos de diseño? Si te encuentras con este caso, puede seguir utilizando la librería Font Awesome sin problema alguno, solo tienes que modificar un poco su implementación. Para llevar a cabo el uso de Font Awesome sin el tag de cursiva, todo lo que necesitas hacer es utilizar el pseudo-elemento :before del elemento que deseas utilizar y establecer su contenido con la propiedad font-family:
div.github:before {
content: "f09b";
font-family: FontAwesome;
/* aqui puedes dar mas estilo al icono, incluyendo colores, tamaño de la fuente, posicionamiento, etc. */
}
Esto es esencialmente lo que Font Awesome hace por con las etiquetas <i>, así que es totalmente natural que lo hagamos para nuestro propio propósito. Para encontrar la cadena que debes utilizar para mostrar un icono concreto, abre el fichero font-awesome.css y busca el icono que quieras utilizar. Si aún así no das con el, puedes ir a su página oficial y utilizar el buscador que han habilitado para ello. Allí siempre encontrarás el icono que estés buscando entre los cientos y cientos que dispone esta librería de glifos.
Y este ha sido el tutorial sobre cómo utilizar FontAwesome sin los tags de cursiva, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!