About

Since JTB Icons uses fonts to show icons, which means that the icons are just charracters like letters in the alphabet, you can re-design them as the way you design your default text elements.

Coloring

To colorize your icons, you can simply give color attribute to your item.

							<!-- Default (Black)-->
<i class='jtbIR-rocket-launch'></i>

<!-- Custom color (Blue) -->
<i class='jtbIR-rocket-launch' style='color: #137ff6;'></i>
						

Sizing

To make your life easier, we defined some sizing classes for icons in jtbI.css file. Once you include it, you can simply resize your icon with adding .jtbI-[ 1-10 ]x class into it where [1-10] represents the exact font-size in em.

							<!-- Default (1em)-->
<i class='jtbIR-leaf'></i>

<!-- 2x size of default (2em)-->
<i class='jtbIR-leaf jtbI-2x'></i>

<!-- 3x size of default (3em)-->
<i class='jtbIR-leaf jtbI-3x'></i>
						

If the pre-defined sizing classes not enough for you and want to make them bigger or use sizes with decimals; like coloring icons, you can simply add font-size attribute of CSS into them and specify your desired size in there.

							<!-- Custom size (4.21em) -->
<i class='jtbIR-theater' style='font-size: 4.21em;'></i>
						

Positioning

To stack your icons on top of eachother you can reposition them like the way you reposition any element in HTML/CSS.

							<!-- Stacking icons -->
<i class='jtbIR-home-blank jtbI-4x' style='position: relative;'>
	<i class='jtbIR-key-skeleton' style='font-size: 55%; color: var(--jtbBlue-7); position: absolute; top:55%; left:50%; transform: translate(-50%, -50%);'></i>
</i>
						

Rotating

In JTB Icons to rotate your icons, you can simply give related rotation class into your icon.

.jtbI-rotate-[ 90 | 180 | 270 ] where numbers represent the degrees of rotation in clockwise.

							<!-- Default icon -->
<i class='jtbIR-hourglass-end'></i>

<!-- Rotate 90 degreees -->
<i class='jtbIR-hourglass-end jtbI-rotate-90'></i>

<!-- Rotate 180 degreees -->
<i class='jtbIR-hourglass-end jtbI-rotate-180'></i>

<!-- Rotate 270 degreees -->
<i class='jtbIR-hourglass-end jtbI-rotate-270'></i>