Important: please make sure to update your app version to 2.1.2 to enable the in-app animations previews. To grab this code within the Nucleo app, simply click on the “code” button at the bottom of each icon. Done.īrowser support: these animations are supported by all modern browsers, including our old friend IE9. Here is a code example: Ĭopy this code into a HTML document, and you get this. Each one of our animated icons is composed by visual elements (paths, circles, polygons…), and a script that generates the animation. The SVG power relies on the possibility of working with code. Using SVG for these kinds of interactions is smart. The introduction of ready-to-use animated SVG icons is another step in that direction. One of our main goals is to speed up the workflow of our members. However, wouldn’t it be cool to store these animations in a visual tool, where you can use tags to organize them and grab all the code you need in seconds? Wouldn’t it be even cooler if this application came with a built-in library of interactive icons? Enter Nucleo animated icons! You can create these animations in CSS or SVG, then save your snippets somewhere “safe” and use them when needed. There are micro animated patterns that are used over and over across different projects: for example, a hamburger menu icon that turns into a ❌ (close) icon on click. Sets the location of Font Awesome's webfonts folder and assets.Introducing 2 new icon categories: interactive icons and animated loops | Sets the z-index (opens new window) property of stacked icons Sets the width (opens new window) property of stacked icons Sets the vertical-align (opens new window) property of stacked icons Sets the size of step used when relatively sizing icons with. Sets the base step size that all other relative sizing steps are based on Sets the opacity (opens new window) of a duotone icon's secondary layer Sets the opacity (opens new window) of a duotone icon's primary layer Sets the margin-left/ margin-right (opens new window) property for pulled icons icons Sets the margin-right (opens new window) property for fa-li elements when styling icons in a list icons Sets the width (opens new window) property for fa-li elements when styling icons in a list icons Sets the border-width (opens new window) property used in bordered icons Sets the border-style (opens new window) property used in bordered icons Sets the border-radius (opens new window) property used in bordered icons Sets the padding (opens new window) property used in bordered icons Sets the border-color (opens new window) property used in bordered icons Sets the color (opens new window) property of. Sets the width (opens new window) property for all fixed-width icons Sets the font-display (opens new window) property for Font Awesome's icon fonts Sets the display (opens new window) property (default set to inline-block) for rendered icons Sets the default icon style (using weight) Sets the prefix (default set to fa) used on all styling toolkit CSS rules (e.g. fa-content($fa-var-user) ).įont Awesome's SCSS version also leverages several SCSS variables (opens new window) that allow for easier set-up and customization of our styling toolkit. Mixins that, when combined with fa-icon- style mixins, define the family of styles to be used.Ī mixin to make referencing icons via the CSS content property a bit easier.Īn icon's variable must be passed in (e.g. Mixins that contain all of the base style set up for an icon along with a specific style to render the icon in by a keyboard-only user)Ī mixin that contains all of the base style set up for an icon (minus an icon's style and specific name/unicode) compile user Ī mixin that visually hides an element containing a text-equivalent for an icon while keeping it accessible to assistive technologiesĪ mixin that is used alongside fa-sr-only() to show the element again when it’s focused (e.g. Includes custom icons in a Kit Download (if you're using one) Screen-reader specific and accessibility support styling Utilities used throughout styling/icon definitionsīase icon reference class syntax and definition Where variables are defined that are used throughout styling You can add them all to your project or pick just the ones you need. Below is the list of files made specifically for SCSS. You'll find everything you need in the fontawesome6 directory of the Font Awesome download.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |