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-font-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 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 by setting the font-size configuration option.Using icon fonts in the UI naturally succeeds the outdated icon sprite technique.įont icons demonstrate significant benefits such as: ![]() You can 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |