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.