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
How to use

The guide for you to show how to use icons in your projects with simple steps.

Creating icon

Once you integrate the files successfully, you can free to call any icon at any time with using <i> elements.

  • To use regular icons, you need to call them with .jtbIR-[icon-name] class,
  • To use light icons, you need to call the icon with .jtbIL-[icon-name] class,
  • To use brand icons, you need to call them with .jtbIB-[icon-name] class.
							<!-- Calling regular icon -->
<i class='jtbIR-camcorder'></i>

<!-- Calling light icon -->
<i class='jtbIL-camcorder'></i>

<!-- Calling brand icon -->
<i class='jtbIB-jtbicons'></i>

If an icon can be found in light version, there will be a regular version of it too in JTB Icons. So they are basicly works together but... The brands have no light or regular versions with them. They are in their exact/official forms, and did not redesigned by us.

Changing type

In the previous section, you saw how to call an icon from a pack, now it is time to introduce you "How can you change their types?". In JTB Icons, it is really simple. For each pack (Light, Regular and Brands) we defined additional classes which changes your icon type from normal to circular, square or rounded square.

The only thing you need to do for changing your icon type is adding these classes after your main icon class.

.jtbI-circle for circular type,

.jtbI-square for square type,

.jtbI-rounded for rounded type.

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

<!-- Circular icon -->
<i class='jtbIR-camcorder jtbI-circle'></i>

<!-- Square icon -->
<i class='jtbIR-camcorder jtbI-square'></i>

<!-- Rounded square icon -->
<i class='jtbIR-camcorder jtbI-rounded'></i>

Note that, the non-default types of icons (circular / square / rounded) are not 'designed' icons, they just use the default icon with border attributes of browsers. We defined them to eliminate custom sizing & positioning problems for you.

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 © 2024 JTBLabs - All rights reserved.