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 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:
And Lithium theme:
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.