The Kendo UI suite for Angular delivers more than 400 integrated font icons for its components. Icon fonts are fonts which contain vector glyphs instead of letters and numbers. 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. Improved scalability-Icon sprites are bitmap raster images and do not scale well.Font icons use vector graphics, look perfect on retina displays, and make scaling as easy as setting the font-size style.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.Improved browser support-Font icons are supported by all modern browsers.Significantly fewer HTTP requests, compared to separate icons.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.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. Kendo UI provides the following predefined colors: To achieve this, set a :before pseudo content value for the relevant icon.primary-Applies coloring based on primary theme color.secondary-Applies coloring based on secondary theme color.tertiary- Applies coloring based on tertiary theme color.To use the Free Font Awesome 5 icons, go to and sign in to get a code to use in your web pages. info-Applies coloring based on info theme color.Read more about how to get started with Font Awesome in our Font Awesome 5 chapter. success- Applies coloring based on success theme color.warning- Applies coloring based on warning theme color.error- Applies coloring based on error theme color.dark- Applies coloring based on dark theme color.light- Applies coloring based on light theme color.inverse- Applies coloring based on inverse theme color.You can set each of them by using the respective CSS class: Material Design Icons growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project. You can also apply any custom color by using the CSS color property. To better accommodate an icon in your application, flip it horizontaly, vertically, or in both directions by using the k-flip-h or/and k-flip-v predefined CSS classes.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |