To achieve this, set a :before pseudo content value for the relevant icon. Though the web icon font comes with a set of predefined CSS classes, you might need to use the icons with a custom CSS class name. For example, the element as demonstrated in the following example. Load a Kendo UI theme into your project.Īssign a k-icon CSS class followed by a predefined class from the list of font icons to an HTML tag.Reduced file size-A 100KB file contains approximately 500 vector icons.Reduced number of HTTP requests-To load an icon font, you need a maximum of a few HTTP requests.Improved browser support-Font icons are browser-agnostic and are supported by all modern browsers.Improved design capabilities-You can easily apply CSS effects on the fly by setting the text color, shadow, or other options for different interaction states.Improved scalability-While icon sprites are bitmap raster images and do not scale well, icon fonts use vector graphics, look perfect on retina displays, and make scaling as easy as setting the font-size configuration option.
The utilization of icon fonts in a user interface (UI) naturally succeeds the somehow outdated icon sprite technique.įont icons demonstrate significant benefits such as: You can easily style them with CSS by using all styling properties that can be applied to a regular text in a modern browser. Icon fonts are fonts which contain vector glyphs instead of letters and numbers.
0 kommentar(er)
