Añadir Font Awesome a Prestashop
Introducción
Cada día son más utilizadas la tan conocida fuente «Font Awesome» para insertar iconos en nuestra página web, así que en esta entrada vamos a explicar cómo añadir Font Awesome a Prestashop.
Para poder añadir estos iconos tan solicitados, podemos hacerlo de varias formas, pero te vamos a explicar los principales a continuación:
Instalar módulo
1. Primer método: instalar módulo de Font Awesome.
En PrestaDevs, empresa de expertos en PrestaShop, hemos desarrollado un módulo gratuito para Prestashop, en el que al instalarlo ya tendrás esta fuente disponible en toda la tienda. Este módulo lo puedes descargar desde nuestra página web.
Enlazar hoja de estilos (cdn)
2. Segundo método: enlazar hoja de estilos.
Este es un método un poco más «manual» de insertar (o enlazar) una hoja de estilos en tu prestashop. Los pasos que tienes que seguir son los siguientes:
- Edita el fichero
header.tplde tu plantilla y añade el siguiente código entre las etiquetas<head></head>:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
- En este caso se puede observar que de una forma menos dinámica hemos enlazado una URL donde se encuentra la última versión (actual) de font awesome
Descargar y enlazar hoja de estilos
3. Tercer método: descargar y enlazar hoja de estilos.
En este método hay que descargar la fuente, subirla a nuestro directrio FTP de la tienda y enlazarla siguiendo estos pasos:
- Para descargar la fuente, lo puedes hacer gratuitamente desde su página oficial fontawesome.io
- Debemos descomprimir los archivos y subirlas por FTP al directorio
/themes/<tu_plantilla>/fonts/ - Una vez subida, podemos enlazar el fichero CSS insertando el siguiente código entre las etiquetas
<head></head>de tu ficheroheader.tpl(igual que en el segundo método):
<link rel="stylesheet" type="text/css" href="mystyle.css">
Aquí vemos un ejemplo de que funciona
Aquí podemos ver un ejemplo de uso de Font Awesome en una tienda en Prestashop.
Por último, una vez tengamos instalado nuestra fuente en nuestra tienda de Prestashop, para comprobar si funciona, debemos introducir un código similar al que vemos a continuación en la plantilla (fichero .tpl) que deseamos ver la fuente:
<i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i>
Y eso es todo …
Para más información, puedes consultar el listado de iconos en la web oficial de Font Awesome: fontawesome.io/icons/.
Como conclusión final, nosotros recomendamos utilizar el primer método, e instalar nuestro módulo de Font Awesome, ya que te evitas estar editando ficheros que en una actualización de versión de Prestashop, podría sobrescribirlo y dejar de funcionar. Eso es todo, espero que les haya sido de mucha ayuda.
¡Sígueme en mis redes sociales o en mi página web personal!