Try now Demo en
  • en
  • fr
  • de
  • Product
    • Platform
      • Software TourFeatures & capabilities overview
      • Why eXoeXo Platform key differentiators
      • InternationalisationSupporting multilingual environments
      • MobileResponsive & available on any device
    • Technology
      • No CodeTailor eXo platform to your needs
      • ArchitectureAn overview of eXo Platform technology
      • IntegrationsAvailable connectors & integration capabilities
      • SecurityeXo Platform security measures
      • Open sourceComponents & licensing
  • Solutions
    • Communication
      • Modern IntranetBuild your company culture
      • Knowledge managementCentralize and share your company knowledge
      • Community managementEngage your community
      • ExtranetInvolve your clients and partners
    • Collaboration
      • Social NetworkConnect all your employees
      • Collaboration PlatformEmpower your teams
      • Employee PortalCentralize your work environment
      • Employee EngagementEngage & empower your employees
    • For
      • Public Sector
      • Networks
      • Education
      • Enterprises
  • Pricing
  • Resources
    • Resource center
      • Case studies
      • White Papers
      • Datasheets
      • Videos
    • Migration guide
      • Alternative to Microsoft 365
      • Alternative to Sharepoint
      • Alternative to Workplace from Meta
    • From The Blog
      • eXo Platform 6.5 is released: personalized navigation, multi-sites management and more
      • eXo launches its online community platform – eXo Tribe!
      • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
  • Community
    • CommunityJoin our online community platform
    • DownloadLaunch eXo platform in your infrastructure
    • Source codeSource code on github
    • FAQsAbout the software, the community and our offers
    • REST APIs & DocumentationAll REST APIs available in eXo Platform
  • Company
    • Customers
    • Partners
    • Services
    • About us
    • Contact us
    • Newsroom
  • Menu mobile
    • Pricing
    • About us
    • Careers
    • Resource center
    • Blog
    • Contact us
    • Try eXo
Platform
  • Software Tour Features & capabilities overview
  • Why eXo eXo Platform key differentiators
  • Internationalisation Supporting multilingual environments
  • Mobile Responsive & available on any device
Technology
  • No Code Tailor eXo platform to your needs
  • Architecture An overview of eXo Platform technology
  • Integrations Available connectors & integration capabilities
  • Security eXo Platform security measures
  • Open source Components & licensing
Communication
  • Modern Intranet Build your company culture
  • Knowledge management Centralize and share your company knowledge
  • Community management Engage your community
  • Extranet Involve your clients and partners
Collaboration
  • Social Network Connect all your employees
  • Collaboration Platform Empower your teams
  • Employee Portal Centralize your work environment
  • Employee Engagement Engage & empower your employees
For
  • Public Sector
  • Networks
  • Education
  • Enterprises
Resource center
  • Case studies
  • White Papers
  • Datasheets
  • Videos
Migration guide
  • Alternative to Microsoft 365
  • Alternative to Sharepoint
  • Alternative to Workplace from Meta
From The Blog
  • eXo Platform 6.5 is released: personalized navigation, multi-sites management and more
  • eXo launches its online community platform – eXo Tribe!
  • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
Community Join our online community platform
Download Launch eXo platform in your infrastructure
Source code Source code on github
FAQs About the software, the community and our offers
REST APIs & Documentation All REST APIs available in eXo Platform
Customers
Partners
Services
About us
Contact us
Newsroom
Pricing
About us
Careers
Resource center
Blog
Contact us
Try eXo
  1. Accueil
  2. Tutorial
  3. Icon font and skin module add-on in eXo Platform 4.3

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

BD-2789-BlogCover-650x220

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.

PageLoad

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.

Compare

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.

IconFontsColor

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

TimeDollar

How did we do all this?

process

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:

folder-fonts

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

IconFontSample

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.

exo christmas blue

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.

Full-featured digital workplace with everything your employees need to work efficiently, smartly integrated for a compelling employee experience

  • Product
    • Software tour
    • Communication
    • Collaboration
    • Knowledge
    • Productivity
    • Open Source
    • Integrations
    • Security
  • Uses cases
    • Digital Workplace
    • Intranet software
    • Collaboration software
    • Knowledge management software
    • Entreprise Social Network
    • Employee Engagement platform
  • Roles
    • Internal Communications
    • Human Resources
    • Information Technology
  • Company
    • Product offer
    • Services Offer
    • Customers
    • Partners
    • About us
  • Resources
    • FAQs
    • Resource Center
    • Collaboration guide
    • What is a Digital workplace?
    • What is an intranet?
    • Employee engagement
  • Terms and Conditions
  • Legal
  • Privacy Policy
  • Accessibility
  • Contact us
  • Sitemap
  • Facebook
  • Twitter
  • LinkedIn
wpDiscuz