- 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.
- Scalable: Using icon fonts, changing the size of your icons would be as easy as changing the font size.
- Vector: Font icons are vector and resolution independent. They look good on both high and low PPI displays, on both mobile and desktop devices.
- Fast: By having your icons in a font, you can load them with one HTTP request.
- Accessible: When done right, icon fonts are 100% accessible and compatible with screen readers.
- 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
2. Unpack the package contents into the folder inside your Custom Theme.
3. Add @import rule to the css.
[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:
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.
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.
- Button: “btnSubmit iconfont-music”
- Label: “lblUserName iconfont-user”