The guide for you to show how to use icons in your projects with simple steps.
Once you integrate the files successfully, you can free to call any icon at any time with using <i>
elements.
.jtbIR-[icon-name]
class,.jtbIL-[icon-name]
class,.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.
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 .
Project.
Community.
Copyright © 2023 JTBLabs - All rights reserved.