UIkit comes with its own SVG icon system and a comprehensive library, which comprises a growing number of elegant outline icons. This component injects SVGs into the site, so that they adopt color and can be styled with CSS.
Here is a list of common content fields for Uikit Icons add-on.
|Icons||An icon field with an icon selector. See live preview here https://getuikit.com/docs/icon|
|Size||Enter a size ratio, if you want the icon to appear larger than the deful font size, for example 1.5 or 2 to double the size.|
|Enabel Custom Link||Enter or pick a link for icon. .|
|Enable Icon Box||Create boxed icon with custom background and color icon|
|Enable Hover Options||Add hover effect for icon|
|Hover Animation||Override the hover's animation setting when hovering to icon|
General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.
|Margin||Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom.|
|Remove top margin.||Use this option to remove the add-on's top margin|
|Remove bottom margin.||Use this option to remove the add-on's bottom margin|
|Animation||Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on.|
|Alignment||This option specifies the alignment of an add-on according to the surrounding element|
|Text Breakpoint||Define the device width from which the alignment will apply.|
|Visibility||Define when the add-on should be hidden.|
|CSS Class||If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file.|