Documentation of icons, image utilities and badge components.
Files
app/styles/modules/_icons_images.scssIcons
Here is preview of icon set used in this project. An icon can be created by using class .icon on <i> element and coresponding ligature inside the tags. Ligatures for icons can be found under icons in preview
Warning
Do not forget to configure preferences for icomoon font: check include metadata in fonts, check encode & embed font in CSS
dependency
Icomoon icons require to link app/fonticons/icomoon/style.css file in <head>.
All files required for icomoon can be found in folder app/fonticons/icomoon/
For more specific documentation check icomoon.
<ul>
- for (var i=0; i < getIcons().length; i++) {
<li><i class="icon icon-l">getIcons()[i]</i></li>
- }
</ul>Sizes
There are fours sizes for iconsL XL, L, M, S. Size for icon can be specified with class .icon-[xl/l/m/s] on icon element.
Note
In case there is no class for size, icon will inherit size from parent font-size property.
<ul>
<li><i class="icon icon-xl">home</i></li>
<li><i class="icon icon-l">home</i></li>
<li><i class="icon icon-m">home</i></li>
<li><i class="icon icon-s">home</i></li>
</ul>Colors
Icons use same text color priciple for colors as typography.
Note
In case there is no class for color, icon will inherit color from parent color property.
<ul>
<li><i class="icon icon-l text-color-orange">home</i></li>
<li><i class="icon icon-l text-color-orange-100">home</i></li>
<li><i class="icon icon-l text-color-semiblack">home</i></li>
<li><i class="icon icon-l text-color-error">home</i></li>
</ul>Image utilities
There are three basic image utilities: fluid, rounded and circle. Fluid utility gives image ability to change size coresponding to its parent. Circle and rounded utilities provides specific shapes for images.
<img src="..." class="img-fluid">
<img src="..." class="img-rounded">
<img src="..." class="img-circle">