Press "Enter" to skip to content

Using icon fonts in K2

0

Recently I had an internal discussion within my team, that K2 Smartforms has a limited number of icons, that a user can use with the out-of-the-box controls, like buttons or data labels. We all agreed, that we need more. However, even if we have 1000 icons to be used with buttons, some other customers will always require more or something totally different. Therefore, I decided to write a short article to demonstrate, how you can quickly and easily add icon fonts in K2 to get almost unlimited number of icons for your purposes.

In my previous article Using Iconfonts in a custom theme I already explained, what the benefits of icon fonts are and how you can embed icons into your custom theme, so that they can appear next to your Data Labels or Buttons with a certain namespace. Here I will concentrate on a K2 Cloud ready approach, where you cannot add a custom theme. It can also be used for on-premise installations, however, the users, who open the form, should have connection to the internet. Otherwise, the icons will not appear. I will use one of the most famous icon fonts on the Internet, i.e. Font Awesome. So let’s go.

1. Add a link tag to the icon font CSS

If you open the Font Awesome web-site, you can easily find a link, which you need to add onto your web-page. The link will load all the necessary CSS files and fonts, that will be used by the browser. In my case the link looks like this:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

If we were in control of the html page, that is produced by K2, we would definitely add this tag into the <head>…</head> section of the page. However, we cannot add anything to there (at least there are no ways I am aware of :)), therefore, we are adding this link tag directly onto the form. For that we will use the Data Label. For more details how to do this, please, look into the following article How to add JavaScript on Smartforms. I know we are not adding JavaScript, but in our case it does not matter a lot. Just remember, that you need to make your data label literal and uncheck Prevent XSS property. After you add this link tag and open the form/view, the necessary css files will be loaded into the form.

If you plan to use icon fonts on multiple K2 forms, I recommend you to create a reusable view, where you can add the link only once and then load it on every form, where you need it.

2. Start adding icons on your forms

There are at least 3 controls, that can be used to show icon fonts in K2:

  • Data Label – you need to make it literal and uncheck Prevent XSS property, then it will render the text as HTML;
  • ToolBar Button – as an icon select None, so that you do not have 2 icons next to one another. It also renders the text as HTML;
  • Tabs – they simply render the text as html.

On the Font Awesome web-site, find the necessary icon and the format of the <i> tag, that is used to display icons. For example, in my example I am using the following ones:

<i class="fas fa-ship"></i>
<i class="fas fa-plane"></i>
<i class="fas fa-bus"></i>
<i class="fas fa-cut"></i>
<i class="fas fa-sitemap"></i>
...

After I add that HTML into the text property of the above-mentioned controls, I will have the following results in the Blue Void theme:

Blue Void theme demo

And Lithium theme:

Lithium theme demo.

You can check the font awesome developer reference, so that you can find out how to change the icon size, without changing the size of the text and a lot more. Hope, you can now start using icon fonts in K2.

Leave a Reply

Your email address will not be published. Required fields are marked *

four × two =