Icon <kui-icon>
You can place KotchiUI Font Awesome icons just about anywhere in the page
Attributes Configurations
Kotchi UI Font Awesome icons are very flexable to configure and control
Below is a list of the available attributes for configuring <kui-icon>
| Attribute | Type | Default value | Description |
|---|---|---|---|
| kui-label | String | The icon's label - used for screen readers | |
| kui-icon | String | The icon to be used from the available, more information. | |
| kui-size | KUIIcon.Size | The size of the icon, relative to the inherited font-size style value, more information. | |
| kui-pull | KUIIcon.PullDirection | Pull quotes or article icons, more information. | |
| kui-animate | KUIIcon.Animate | Makes the icon spin or have it rotate with 8 steps, more information. | |
| kui-rotate | KUIIcon.Rotate | Rotates the Icon with the given angel, more information. | |
| kui-flip | KUIIcon.Flip | Flips the Icon with the desired direction, more information. | |
| kui-fixed-width | Boolean | false | Apply the fixed width style on the icon, more information. |
| kui-bordered | Boolean | false | Adds a border arround the icon, more information. |
Basic Examples
KotchiUI Font Awesome icons are accessable, fully controled as regular font awesome icons
<kui-icon> wraps Font Awesome free plan icons, Solid and Brands.
To start using this element, just spesify the icon you want to use as the value of the <kui-icon> attribute, see examples below.
When you want the icon to meet the accessability requirements, add the kui-label attribute with the label you want.
<kui-icon kui-icon="fas fa-camera" kui-size="fa-3x" kui-label="Take a picture"></kui-icon>
<kui-icon kui-icon="fab fa-android" kui-size="fa-3x" kui-label="I use Android"></kui-icon>
<kui-icon kui-icon="fab fa-apple" kui-size="fa-3x" kui-label="And I prefare Apple products"></kui-icon>
Sizing Icons
KotchiUI gives some basic controls for sizing icons in the context of your page’s UI.
Icons inherit the font-size of their parent container which allow them to match any text you might use with them. we can increase or decrease the size of icons relative to that inherited font-size using the kui-size attribute.
<kui-icon kui-icon="fas fa-camera" kui-size="fa-xs"></kui-icon>
<kui-icon kui-icon="fas fa-camera" kui-size="fa-sm"></kui-icon>
<kui-icon kui-icon="fas fa-camera" kui-size="fa-sm"></kui-icon>
<kui-icon kui-icon="fas fa-camera" kui-size=""></kui-icon>
<kui-icon kui-icon="fas fa-camera" kui-size="fa-lg"></kui-icon>
<kui-icon kui-icon="fas fa-camera" kui-size="fa-2x"></kui-icon>
<kui-icon kui-icon="fas fa-camera" kui-size="fa-3x"></kui-icon>
<kui-icon kui-icon="fas fa-camera" kui-size="fa-5x"></kui-icon>
<kui-icon kui-icon="fas fa-camera" kui-size="fa-7x"></kui-icon>
<kui-icon kui-icon="fas fa-camera" kui-size="fa-10x"></kui-icon>
Pulled Icons
Occasionally you might want to wrap text around an icon.
Use kui-pulled attribute to pull the icon eaither left or right for easy quotes or article icons
<kui-icon kui-icon="fas fa-quote-left" kui-size="fa-2x" kui-pulled="fa-pull-left"></kui-icon>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae neque at
nulla interdum gravida. Maecenas tempor viverra varius. Aenean vitae
facilisis odio. Pellentesque faucibus vitae neque sit amet accumsan.
Phasellus mattis mi nec ligula scelerisque faucibus et id purus. Vestibulum
convallis, dolor ut malesuada dignissim.
Animating Icons
Enable animation on icons to simulate loading or communicating state
Use the kui-animate attribute with KUIIcon.Animate.Spin value to get any icon to rotate, and use KUIIcon.Animate.Pulse to have it rotate with 8 steps. Works especially well with fa-spinner & everything in the spinner icons category .
<div style="font-size: 3rem;">
<kui-icon kui-icon="fas fa-spinner" kui-animate="fa-spin"></kui-icon>
<kui-icon kui-icon="fas fa-circle-notch" kui-animate="fa-spin"></kui-icon>
<kui-icon kui-icon="fas fa-sync" kui-animate="fa-spin"></kui-icon>
<kui-icon kui-icon="fas fa-cog" kui-animate="fa-spin"></kui-icon>
<kui-icon kui-icon="fas fa-spinner" kui-animate="fa-pulse"></kui-icon>
<kui-icon kui-icon="fas fa-stroopwafel" kui-animate="fa-spin"></kui-icon>
</div>
Rotating and Flipping Icons
Sometimes you need to rotate, flip, or mirror an icon for it to work in your project or design.
To arbitrarily rotate and flip icons, set the kui-roatate attribute to fa-rotate-* and fa-flip-* values.
<div style="font-size: 3rem;">
<kui-icon kui-icon="fas fa-snowboarding"></kui-icon>
<kui-icon kui-icon="fas fa-snowboarding" kui-rotate="fa-rotate-90"></kui-icon>
<kui-icon kui-icon="fas fa-snowboarding" kui-rotate="fa-rotate-180"></kui-icon>
<kui-icon kui-icon="fas fa-snowboarding" kui-rotate="fa-rotate-270"></kui-icon>
<kui-icon kui-icon="fas fa-snowboarding" kui-flip="fa-flip-horizontal"></kui-icon>
<kui-icon kui-icon="fas fa-snowboarding" kui-flip="fa-flip-vertical"></kui-icon>
<kui-icon kui-icon="fas fa-snowboarding" kui-flip="fa-flip-both"></kui-icon>
</div>
Fixed Width Icons
Need to vertically align a series of icons, like in a list or navigation menu? We’ve included a fixed-width support styling for just those cases.
set the attribute kui-fixed-width to true on the kui-icon element to set one or more icons to the same fixed width. This is great to use when varying icon widths (e.g. a tall but skinny icon atop a wide but short icon) would throw off vertical alignment. For clarity in the following example, we've added a background color on the icon so you can see the fixed width and also bumped up the font-size of the parent element.
<div style="font-size: 2rem;">
<div><kui-icon kui-icon="fas fa-skating" kui-fixed-width="" style="background:DodgerBlue"></kui-icon> Skating</div>
<div><kui-icon kui-icon="fas fa-skiing" kui-fixed-width="" style="background:SkyBlue"></kui-icon> Skiing</div>
<div><kui-icon kui-icon="fas fa-skiing-nordic" kui-fixed-width="" style="background:DodgerBlue"></kui-icon> Nordic Skiing</div>
<div><kui-icon kui-icon="fas fa-snowboarding" kui-fixed-width="" style="background:SkyBlue"></kui-icon> Snowboarding</div>
<div><kui-icon kui-icon="fas fa-snowplow" kui-fixed-width="" style="background:DodgerBlue"></kui-icon> Snowplow</div>
</div>
Bordered Icons
Occasionally you might want to give icons some visual distinction with a border.
When using kui-bordered attribute the icon is given a border.
<kui-icon kui-icon="fas fa-arrow-left" kui-size="fa-2x" kui-bordered=""></kui-icon>
<kui-icon kui-icon="fas fa-arrow-right" kui-size="fa-2x" kui-bordered=""></kui-icon>