Skip to main content
OutSystems

How to Add and Use Icon Fonts in OutSystems Apps

Question

I have some files with the definition of icon fonts I want to use in my OutSystems apps:

  • Can I add them to the IDE to extend the default icon fonts?
  • Can I use them the same way as I did with the default icon fonts?

Answer

In the next sections, you will find the steps to add and use icon fonts in OutSystems apps.

Add the Icon Fonts

Add all the types of the icon font files you have. It’s a best practice since different browsers and operating systems prefer different types.

Add also the CSS file (.css).

Open your app and go to the Data tab.

Import files one by one, as follows:

  1. Right-click on Resources, choose Import Resource, and choose the file;

    ​​​​​​
     
  2. Change the value of the resource Deploy Action property to ‘Deploy to Target Directory’.


     

Add the Style Classes of the Icon Fonts

For the icon fonts to work, their style classes have to be added to the Style Sheet of the application:

  1. Open the .css file you downloaded and copy all its content to the clipboard;
  2. In your application, open the Style Sheet editor and select the Style Sheet of the app;

  3. Go to the end of the CSS;

  4. Paste the content from the clipboard;
    Important: make sure you paste the classes to the style sheet of the app, not of a screen.


     

  5. If developing a mobile app, you can delete the url() entries with #iefix hashtag;


     

  6. Each resource has a ‘src’ property. Replace the URL path with the one defined in the Runtime Path property of the resource;


     

  7. Publish the app.

Use Icon Fonts in a Mobile App

To use icon fonts in your mobile app, proceed as follows:

  1. Use the Icon widget and add an icon to your mobile app’s screen;


     
  2. The window to choose the icon pops up. Press OK without choosing because we will be selecting it using Style Classes.
  3. Select the Icon widget, go to the Style Classes property, and type in the class name of the Icon font to use as, for example, icon-cloudy. The icon will will appear on the UI.


     

Using an Icon Font in a Web App

Repeat the steps that were done for a Mobile app but instead of using the Icon widget, use the Container widget. You won’t see a preview of the icon, but it will be visible in the app at runtime.

  • Was this article helpful?