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. You can also apply any custom color by using the CSS color property. You can set each of them by using the respective CSS class: inverse- Applies coloring based on inverse theme color. To delete everything on the canvas: Clear button in the drawing toolbar at the bottom.light- Applies coloring based on light theme color.dark- Applies coloring based on dark theme color.error- Applies coloring based on error theme color.warning- Applies coloring based on warning theme color.success- Applies coloring based on success theme color.info-Applies coloring based on info theme color.tertiary- Applies coloring based on tertiary theme color.secondary-Applies coloring based on secondary theme color. This determines whether the header should shrink away as the user scrolls down, and reveal itself as the user scrolls up.primary-Applies coloring based on primary theme color.Kendo UI provides the following predefined colors: 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. Over 80 Angular UI Components with top-notch quality to help you implement all your UI.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.Font icons use vector graphics, look perfect on retina displays, and make scaling as easy as setting the font-size style. 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 |