Home Icons Docs Blog
v1.1 - Ashy tit
Home Icons Docs Blog v1.1 - Ashy tit
v1.1 - Ashy tit Latestv1.0 - Bluethroat
v1.1 - Ashy tit Latestv1.0 - Bluethroat
Sections AboutGetting startedUsageIntegrationHow to useStylingAnimatingDig deeperUpcoming releasesChange logContributeLicence
Styling

Discover how to make your icons more stylish in JTB Icons!

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>
						
Pro tip: If you do not want to use custom style attributes or do not know how to do it, you can check out our design library JTB_MD to do heavy stuff via simple class assignments.

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>
						
Pro tip: Rotation classes use CSS' transform attribute, so they do not work with animations of the library.

JTB Icons.

A powerful icon libary that tries to solve all your icon-related problems on your projects with its different icon types, customized styling classes, icon-focused animations and more features. Also is free, and will be free forever!

Made by JTBLabs with .

Copyright © 2022 JTBLabs - All rights reserved.