To achieve this, set a :before pseudo content value for the relevant icon. For example:Įven 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. Reduced file size-A 100KB file contains approximately 500 vector icons.Īdd an empty element that will hold the font icon.Īssign a k-icon CSS class that is followed by a predefined class from the list of font icons to an HTML tag.Significantly fewer HTTP requests, compared to separate icons.Improved browser support-Font icons are supported by all modern browsers.Improved design capabilities-You can easily apply CSS effects on the fly by setting text color, shadow, or even styles for interaction states, such as :hover.Before we jump in, check out this video presented by CareerFoundry UI design mentor, Olga. Font icons use vector graphics, look perfect on retina displays, and make scaling as easy as setting the font-size style. The best online tools for choosing a color palette Final thoughts. Improved scalability-Icon sprites are bitmap raster images and do not scale well.Why Use Font Iconsįont icons in user interfaces (UI) naturally succeed the somehow outdated icon sprites.į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. The Kendo UI suite for Angular delivers more than 400 integrated font icons for its components. New to Kendo UI for Angular? Start a free 30-day trial Icons
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |