Press "Enter" to skip to content

Using Iconfonts in a custom theme

0
In the current post I will show you how iconfonts can be easily integrated into the custom theme and then used on your forms with name selectors.

Fontello_Demo_Small

More details on how to create a custom theme for K2 SmartForms can be found in the Developer Reference for K2 Smartforms.
I need to mention, that the approach I am going to describe, is not a recommended one in terms of performance of your custom theme, as per Considerations and Best Practices for Custom Themes, but it can allow you dynamically use icons in your applications without constant change of the theme.

There are several advantages in using the icon fonts.
  1. Flexible: The Web is optimized for displaying text. Easily change the color of your icons or apply other CSS effects. There are clear definitions for icons and emojis in the Unicode. Fonts have always been meant to be used for letters as well as icons.
  2. Scalable: Using icon fonts, changing the size of your icons would be as easy as changing the font size.
  3. Vector: Font icons are vector and resolution independent. They look good on both high and low PPI displays, on both mobile and desktop devices.
  4. Fast: By having your icons in a font, you can load them with one HTTP request.
  5. Accessible: When done right, icon fonts are 100% accessible and compatible with screen readers.
  6. Use Locally: By installing custom built TTF fonts on your system, you could use them in various different design and editing applications.

1. Download an iconfont pack

There are a lot of different iconfont packs, free and premium editions, available on the Internet. For the demo purposes I will use the Fontello free pack.
On this web-site you can select the icons you would like to add in your Custom Theme and download the package.

2. Unpack the package contents into the folder inside your Custom Theme.

3. Add @import rule to the css.

You need to add the @import rule into the css file of your custom theme, which is situated here
[K2 Installation Folder]K2 smartforms DesignerStylesThemes
[K2 Installation Folder]K2 smartforms RuntimeStylesThemes
In my case, the name of the file will be [K2 Installation Folder]K2 smartforms DesignerStylesThemesTest01_Lithium.css

The rule will look like this:

@import url(‘Test01_Lithium/IconFont/CSS/fontello.css’);‚Äč

4. Change the selectors by class to the selectors by name.

For this you need to open the CSS file of the Fontello icon font and do some manipulations with Replace function.
Before change:

Fontello_css
After change:
FontelloCssAfter

5. Add the name selector into the name of your controls.

Then during the development you only have to add the selecto to the name of your controls. Changing the font properties of your controls (e.g. Button, DataLabel, Label etc.) will also change appearance of the icons.

E.g.:

  • Button: “btnSubmit iconfont-music”
  • Label: “lblUserName iconfont-user”

Fontello_Demo

Leave a Reply

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

17 + 9 =