{"id":37371,"date":"2016-01-07T08:22:21","date_gmt":"2016-01-07T16:22:21","guid":{"rendered":"\/blog\/?p=9965"},"modified":"2016-01-07T08:22:21","modified_gmt":"2016-01-07T16:22:21","slug":"icon-font-and-skin-module-add-on-in-exo-platform-4-3","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/icon-font-and-skin-module-add-on-in-exo-platform-4-3\/","title":{"rendered":"Icon font and skin module add-on in eXo Platform 4.3"},"content":{"rendered":"

\"BD-2789-BlogCover-650x220\"<\/a><\/p>\n

In eXo Platform 4.3, we migrated from our old sprite icons to a new beautiful icon font, which is one of the key components of our new responsive layout<\/strong><\/a>.
\nIn this blogpost, we will explain why we used the icon font in eXo Platform and how it will help you to create your own skin for eXo easily.<\/p>\n

<\/p>\n

Font what…?<\/h2>\n

Icon font! An icon font is simply a font. The difference is that instead of representing some letters or numbers, this font represents icons. To use an icon font, you just need to embed the icon web font, then select the icon from the character map and type the letter or number.<\/p>\n

Why is an icon font used in Platform 4.3.x ?<\/h2>\n

Let\u2019s talk about some benefits of the icon font.<\/p>\n

Performance<\/strong>
\nAs a font file is very small, just one HTTP request is sent to the server. You send one single HTTP request(s) to load it instead of the multiple HTTP requests that bitmap images might require.<\/p>\n

\"PageLoad\"<\/a><\/p>\n

Retina support<\/strong>
\nBecause the characters in an icon font are vectors, this means that they look good even in displays with a high pixel density, like retina devices.<\/p>\n

\"Compare\"<\/a><\/p>\n

Full CSS styling<\/strong>
\nBecause an icon font contains normal alphabetical letters, you can style the icons using CSS properties. It is possible to change the colors, font style and even some CSS3 animation properties, like adding a drop shadow or rotating the icon.<\/p>\n

\"IconFontsColor\"<\/a><\/p>\n

Workflow efficiency<\/strong>
\nBy removing the need to generate sprites and manually position various-sized images, you will definitely save time and effort.<\/p>\n

\"TimeDollar\"<\/a><\/p>\n

How did we do all this?<\/h2>\n

\"process\"<\/a><\/p>\n

At eXo, we used the Illustrator tool and the icoMoon website to create our icon font.
\nFirst, we created icons in Illustrator and saved them as file with format SVG. Then we just uploaded them to iconMoon<\/strong><\/a> to render the font files<\/p>\n

How did an icon font improve an eXo skin?<\/h2>\n

If you have read the document Deep look at the new skin module feature in Platform 4.2<\/strong><\/a>, you will know that we describe in some detail the skin module in eXo Platform 4.2 and how this feature can help you to quickly create your own skin for eXo Platform. Exo Platform 4.3 embeds the icon font, to make the skin even better, with:<\/p>\n