Icon font and skin module add-on in eXo Platform 4.3

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.
In 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.

Font what…?

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.

Why is an icon font used in Platform 4.3.x ?

Let’s talk about some benefits of the icon font.

Performance
As 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.

Retina support
Because 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.

Full CSS styling
Because 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.

Workflow efficiency
By removing the need to generate sprites and manually position various-sized images, you will definitely save time and effort.

How did we do all this?

At eXo, we used the Illustrator tool and the icoMoon website to create our icon font.
First, we created icons in Illustrator and saved them as file with format SVG. Then we just uploaded them to iconMoon to render the font files

How did an icon font improve an eXo skin?

If you have read the document Deep look at the new skin module feature in Platform 4.2, 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:

• High-quality display

The icon font uses SVG images before the icons are rendered to a font file, so it supports retina devices very well and there are no blurry icons anymore.

• Easy to change the colors

The skin module was a really awesome feature in eXo Platform 4.2, but there were some limitations in changing the icon color of sprites. That’s why the skin module had a default color icon folder, with red, blue, green, orange, yellow… However, if you wanted to change to a special color, you had to create new sprite icon files by yourself. If you were a designer, it was very boring, and if you were not, it took you a lot of time. Now these problem have been solved with the icon font.

• Flexibility in changing the size

Besides that the changing the color of an icon, it’s now also easy to change the size of them. On some small devices, we need to increase the size of text and icons to make them easily readable. This was never easy to do with a sprite icon.

• Reduce icon duplication

With sprite icons, we had to duplicate icons with the same shape but a different color. Now we just use the CSS properties to define the color of an icon.

• Simplify the icon folder structure

Our font files have been included in the eXo Platform UI project. This is how the icon font is structured:

Thanks to the icon font, it is now possible to change everything simply by modifying a few variables:

@colorIconDefault: #bf9b2e; // DEFAULT ICON COLOR
@colorIconPrimary: @primaryColor;// HOVER STATUS ICON COLOR
@sizeIconDefault: 14px;// DEFAULT SIZE

How to migrate an eXo skin 4.2?

Have you already created a personal skin in eXo Platform 4.2 through the skin module add-on? Great! The following lines explain how to migrate it to make it compatible with eXo Platform 4.3:

• Back up the variable.less file of your Skin Module PLF 4.2 add-on.
• Create a new Skin Module PLF 4.3 add-on following the official documentation.
• Manually select the modified values of the variable.less backup to the variable.less of your new Skin Module PLF 4.3 add-on.
• Compile and install your Skin Module PLF 4.3 add-on.

That’s it!

After discovering the advantages of the icon font, we are sure you would like to create your own skin and apply your personal color to the eXo icons. Please download and experience the change with eXo Platform 4.3-RC1.

Do you have any questions? Share them with us here!.

Brahim Jaouane

I am a Digital Marketing specialist specialized in SEO at eXo Platform. Passionate about new technologies and Digital Marketing. With 10 years' experience, I support companies in their digital communication strategies and implement the tools necessary for their success. My approach combines the use of different traffic acquisition levers and an optimization of the user experience to convert visitors into customers. After various digital experiences in communication agencies as well as in B2B company, I have a wide range of skills and I am able to manage the digital marketing strategy of small and medium-sized companies.