Integra Font Awesome en PrestaShop

Integra Font Awesome en PrestaShop y verás lo fácil que es añadir iconos que representen por ejemplo listas o que acompañen a un elemento, como una cesta de compra o una tarjeta, o los iconos de redes sociales.

Esto es lo que vas a prender en este tutorial.

Antes de nada quiero dejar claro que aunque no tengas conocimientos sobre Html o CSS vas a poder hacerlo de forma fácil.

Por qué sé que muchos ponéis en práctica mis consejos o tutoriales así que intentaré buscar siempre palabras para que te resulten fáciles de entender.

Espero que te sirva este tutorial para tu tienda PrestaShop.

¿Qué es Font Awesome?

Es una fuente para poder utilizar ciertos iconos que permiten a los desarrolladores integrarlos en la maquetación de una tienda online con  PrestaShop o cualquier web.

Supongamos que deseas utilizar un icono para representar por ejemplo los productos destacados de tu tienda, bien, insertando un par de líneas y escogiendo el icono deseado se puede implementar de forma fácil, y así nos evitamos las imágenes y el proceso de carga es mucho más rápido.

Eso sí tiene algunos inconvenientes que en internet Explorer 8 no es compatible, pero eso se soluciona con un aviso al usuario de internet Explorer que se actualice a IE11 o Firefox o Chrome.

¿Qué necesitamos para poder añadir esta fuente en nuestra tienda PrestaShop?

Bien, tanto tengas la tienda en un servidor u Hosting, como estés en modo local, te aconsejo que hagas copia de seguridad de los archivos y los renombres añadiendo por ejemplo: miarchivo.php_old así te recordaras que ese archivo es el original o antiguo.

En el caso de que no lo hagas bien puedes poner de nuevo este archivo.

Bien dicho esto sigue estos pasos:

  1. Accedemos a la carpeta de tu tema PrestaShop – Para acceder a la carpeta de tu tema sigue esta ruta: prestashop/themes/tutema/header.tpl
  2. Nos iremos al sitio web: http://fontawesome.github.io/Font-Awesome/get-started/ ahí encontraremos las instrucciones, pero te lo explico para que no te líes.
    Copia esto:  <Link  href = «/ / netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css»  rel = «stylesheet» >
  3. Ahora pégalo dentro del <head> de tu archivo header.tpl
  4. Ya tenemos puesta la instrucción para que reconozca la fuente.
  5. Ahora vamos a añadir un icono de los tantos que ofrece esta fuente, en este caso voy a insertar un icono que representa un megáfono que represente a las novedades en productos.
  6. Voy a buscar la parte del código donde tengo que insertar la siguiente línea para que me reconozca este icono, en mi caso será en un módulo, en el tuyo no lo sé, porque tampoco sé dónde quieres implementarlo, una buena ayuda para descubrir donde iría es mirar con el plug-in de firebug si utilizas Firefox, o el inspector de elemento en Google Chrome.
    Puedes ver ejemplos desde la página de Font Awesome, pero una vez que hayas puesto la línea anterior comentada, hayas guardado y hayas subido el archivo y por supuesto hayas activado desde tu back office en Parámetros avanzados → Rendimiento → Forzar la compilación y desactivar la caché, esto hará que pueda leer esa línea en header.tpl.
  7. Ahora insertamos esta en el código de tu archivo .tpl <i class=»fa fa-bullhorn»> <i>Esta etiqueta <i> con dicha clase “fa fa-bullhorn” hace que pueda verse un megáfono.
  8. Por último si es necesario añádele estilos CSS para posicionarlos donde desees.

Así de fácil se implementa la fuente Awesome en PrestaShop

5 comentarios

  1. Si copiamos la linea tal cual lo dices en el articulo hay ciertos problemas, al menos en algunas versiones de prestashop.
    por lo que es conveniente y al menos a mi me funciona bien cambiar este carácter « por » y quedaría del siguiente modo:

  2. Yo lo he probado, pero por lo que se ve no está incluido en los archivos de fuente font-awesome dentro de PrestaShop. Deberás hacerlo con un icono tipo imagen.

  3. Hola Javier Valero gracias por tu excelente artículo, es muy útil.

    Por favor, me puedes ayudar? estoy usando la plantilla por defecto y quiero cambiar el ícono del teléfono por uno de WhatsApp en el bloque CMSinfo de abajo que se encuentra al lado del bloque de «Síguenos en Facebook». Gracias a tu artículo ya sé cómo cambiarlo pero no sé dónde debo hacerlo, ¿en qué plantilla .TPL ?
    Usando el Firebug o el inspector de elemento en Google Chromelo he podido cambiar exitosamente pero cuando quiero hacerlo realmente no encuentro el template exacto dónde hacerlo. 🙁
    Te agradezco de antemano tu ayuda ya que he estado varios días buscando y no encuentro dónde.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Ver más

  • Responsable: Javier Valero.
  • 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.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Publicar comentario