Como usar Font awesome en Magento
05

oct

 

Como usar Font awesome en Magento

Usar Font Awesome en Magento: Multitud de iconos para tu ecommerce.

Font Awesome es una librería con una gran variedad iconos en formato font que personalmente empleo en esta web y que podemos emplear en cualquier otro site como por ejemplo todos esos proyectos ecommerce que tanto nos apasionan. A grandes rasgos, las ventajas de usar Font Awseome en Magento son:

- Usar font awesome en Magento nos permite insertar todos estos iconos  de una forma rápida y sencilla. A fecha de la publicación del artículo “Como usar Font awesome en Magento” font awesome se encuentra en la versión 4.1.0. Cada nueva versión incorpora mas iconos por lo que el listado de los mimos va en aumento.

- Usar font awesome en Magento nos permitirá reducir el número de imágenes y por lo tanto el tiempo de carga de la página. Los iconos que emplea font awesome son imágenes vectoriales que podemos editar a nuestro gusto mediante css. Esto quiere decir que, ademas de poder personalizar cada uno de los iconos no perderemos nada de calidad en el resultado final.

- Font Awesome es 100% compatible con Bootstrap (Este punto bien se merece una nueva entrada aparte)

Una vez analizadas las ventajas que nos ofrece el uso de Font Awesome frente a los iconos tradicionales mediante imágenes, veamos como usar Font Awesome en Magento mediante un sencillo ejemplo práctico.

Como usar Font Awesome en Magento:

1- Lo primero de todo es dirigirnos a la página de Font Awesome (o a su repositorio en Github) y realizar la descarga correspondiente.

2- Una vez descargado procedemos con la descompresión. Los ficheros que encontramos son:

Usar Font Awesome en Magento - ficheros disponibles

En nuestro caso para la prueba que vamos a realizar haremos uso de Font Awesome en Magento con el tema “modern” que viene en cualquier instalación de Magento.

3- Para usar Font Awesome en Magento, mas en concreto con el tema “modern” copiaremos el fichero font-awesome.min.css dentro de la carpeta “skin/frontend/default/modern/css/font-awesome.min.css” y la carpeta fonts dentro del directorio “skin/frontend/default/modern/”. La estructura de Magento una vez copiados estos ficheros queda de la siguiente forma:

Usar font awesome en magento- estrucutra

4- Ya tenemos los ficheros alojados en nuestro Magento. Para usar Font awesome  vamos a hacer  que Magento añada el css que terminamos de añadir a las paginas. Para ello nos dirigimos al fichero page.xml  ubicado en “app/design/frontend/default/modern/layout/page.xml” e insertamos el código presente en la línea 20:


<default translate="label" module="page">
<label>All Pages</label>
<block type="page/html" name="root" output="toHtml" template="page/2columns-left.phtml">

<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"><script>lib/ccard.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>
<action method="addJs"><script>scriptaculous/effects.js</script></action>
<action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action method="addJs"><script>scriptaculous/controls.js</script></action>
<action method="addJs"><script>scriptaculous/slider.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>
<action method="addJs"><script>varien/form.js</script></action>
<action method="addJs"><script>varien/menu.js</script></action>
<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>
<!-- Añadimos el CSS de FONT AWESOME-->
<action method="addItem"><type>skin_css</type><name>css/font-awesome.min.css</name></action>
<!-- Fin CSS de FONT AWESOME-->
<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
<action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
<action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
<action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

<action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
<action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>
</block>
<pre>

Tras insertar esta línea ya podemos usar Font Awesome en Magento. Lo único que nos queda es hacer uso de las llamadas para cargar los iconos. No obstante, me gustaría destacar que en este ejemplo práctico al estar trabajando dentro de un tema ya disponible en Magento empleamos el layout page.xml. Si por contra queremos realizar esta integración en un tema que estamos integrando desde cero lo mas normal es emplear el layout local.xml que ya  habremos creado para trabajar con la integración de nuevo tema. Resumo muy brevemente la forma de realizarlo por si alguien se encuentra en este caso:

- Nos vamos al fichero local.xml dentro de la carpeta layout del tema correspondiente: “app/design/frontend/default/”nuestro_tema_personalizado”/layout/local.xml

- Insertamos el siguiente código en el que le decimos que añada siempre nuestro el fichero de css de Font Awesome a usar en Magento:

<pre><?xml version="1.0" encoding="UTF-8"?>
<layout version="0.1.0">
  <default translate="label" module="page">
    <reference name="head">
      <!-- Añadimos el CSS de FONT AWESOME-->
      <action method="addCss">
        <stylesheet>css/font-awesome.min.css</stylesheet>
      </action>
    </reference>
 </default>
</layout>

5- Una vez añadida el css de Font Awesome en Magento ya podemos hacer uso de los iconos. Vemos por ejemplo como usar Font Awesome en Magento para añadir un icono en la página estática de política de privacidad que viene por defecto en la instalación:

....
<h2><i class="fa fa-book"></i> What we collect</h2>
<p>We may collect the following information:</p>
...

Tras añadir esta linea podemos ver como el icono “book” ha sido agregado:

Usar font awesome en Magento inserción de css

Como hemos comentado anteriormente, Font Awesome dispone de todos estos iconos por lo que la posibilidad de personalización es muy amplia. La forma de usar Font Awesome en Magento es muy sencilla. Cargamos cada icono con la siguiente llamada:

                <i class="fa fa-'Código-del-icono-de-Font-Awseome'"></i>

Con esto ya estamos en disposición de usar font awesome en Magento, sin embargo como se observa en la captura el icono queda muy pegado al texto y quizá nos pueda interesar aumentar su tamaño o cambiar el color del mismo. Tener unas nociones de como usar Font Awesome en Magento para editar y personalizar el icono nos sería de gran utilidad.

Personalizar los iconos de Font Awesome:

Escalado de los iconos de Font Awesome:  Una forma muy sencilla de aumentar el tamaño de los iconos es mediante el prefijo “fa-’n’g” donde la variable ‘n’ especifica la escala a aplicar. De esta forma si introducimos en el ejemplo anterior el siguiente código:

....
<h2><i class="fa fa-book"></i> What we collect</h2>
<p>We may collect the following information:</p></pre>
<pre><h2><i class="fa fa-book fa-2x"></i> What we collect</h2>
<p>We may collect the following information:</p></pre>
<pre><h2><i class="fa fa-book fa-3x"></i> What we collect</h2>
<p>We may collect the following information:</p></pre>
<pre><h2><i class="fa fa-book fa-4x"></i> What we collect</h2>
<p>We may collect the following information:</p></pre>
<pre>...

La salida que obtenemos es:

Como usar font awesome en magento opción escalado escalado

Donde puede observarse que el tamaño de los iconos ha ido en aumento tal y como hemos especificado en el código.

Cambiar el color y otros atributos de los iconos de Font Awesome: Una forma muy sencilla para manipular el resto de propiedades de los iconos de Font Awesome que empleamos en Magento es incluir una clase que posteriormente personalicemos en nuestra hoja de estilos. Veamos un pequeño ejemplo en el que  modificaremos el color y fijamos un margen en cada uno de los iconos según el tamaño de los mismos.

El código html que empleamos para usar Font Awesome en Magento es el siguiente. Como se puede observar empleamos una clase span con el color final de cada icono:

<!--Rojo-->
<h2><span class="red"><i class="fa fa-book"></i></span> What we collect</h2>
<p>We may collect the following information:</p>
<!--Azul-->
<h2><span class="blue"><i class="fa fa-book fa-2x"></i></span> What we collect</h2>
<p>We may collect the following information:</p>
<!--Verde-->
<h2><span class="green"><i class="fa fa-book fa-3x"></i></span> What we collect</h2>
<p>We may collect the following information:</p>
<!--Naranja-->
<h2><span class="orange"><i class="fa fa-book fa-4x"></i></span> What we collect</h2>
<p>We may collect the following information:</p>

Ahora deberemos de actualizar nuestra hoja de estilos. En mi caso el style.css del tema modern ubicado dentro de “skin/frontend/default/modern/css/style.css” donde añadimos estas sencillas líneas:

.red { color: red; margin: 0 10px;}
.blue { color: blue; margin: 0 10px;}
.green { color: green; margin: 0 10px;}
.orange { color: orange; margin: 0 10px;}

Sin más, procedemos a cargar nuevamente la página. Podemos observar como se ha actualizado el color y el margen de los iconos:

Usar font awesome en Magento cambio de color

Podeis encontrar mas opciones de personalización a la hora de usar Font awesome en Magento dentro de  la sección de ejemlos de la página oficial.

Finalizar esta entrada resaltando nuevamente que usar Font Awesome en Magento nos abre un gran abanico de posibilidades a la hora de personalizar nuestro ecommerce. De una forma muy sencilla accedemos a un gran número de iconos que podemos personalizar rápidamente sin perder el mímino de calidad. Además el hecho de no emplear imágenes nos asegura que estamos optimizando la carga de nuestra página. Usar  Font Awesome en Magento es otra de esas funcionalidades que nos abre un gran abanico de posibilidades a la hora de personlizar y optimizar nuestra tienda online tal y como ya vimos en la entrada dedicada a la introducción de fuentes personalizadas mediante el uso de Google fonts.

¿Y vosotros…  conocíais ya esta funcionalidad y como usarla? ¿Seguis empleando imágenes para cargar los iconos de vuestra web o preferis usar Font Awesome en Magento? ¿Empleais alguna otra alternativa interesante a Font Awesome?

Resumen
Nombre
Como usar Font awesome en Magento
Autor
Descripción
Como usar Font Awesome en Magento. Ten acceso a gran cantidad de iconos vectoriales sin la necesidad de emplear imágenes que sobrecargan al carga de tu proyecto. Dispón de una fácil edición de todos los símbolos mediante css sin perder calidad en los mismos.
The following two tabs change content below.
Especialista en Magento y servicios ecommerce: Consultoría ecommerce, Optimización Magento, Desarrollo Magento, Integración Magento ERP y Posicionamiento SEO Magento.


Deja un comentario
 

Tu email no será publicado. Campos obligatorios . *