ICONS

JTB_MD has a completely free icon font which is a pack of 1087 beautiful icons for common actions and items. We've collected these icons from different sources which you can display from icon contributers.

Usage

To use the icon from library, just create an <i> tag with a class has two information:.

  • All icon classes starts with jtb- (JTBLabs' prefix naturally)
  • The icon code (Ex: photo-camera)

Once you put them together in a tag, you can create an icon in anywhere in your project.

        Copy
        <i class='jtb-photo-camera'></i>
    

Since the icons are just a font, it is possible to use all css codes for texts to modify them.

To increase their sizes, you can simply use font-size attribute of css.

        Copy
        <i class='jtb-photo-camera'></i>
<i class='jtb-photo-camera' style='font-size: 1.5em;'></i>
<i class='jtb-photo-camera' style='font-size: 2em;'></i>
<i class='jtb-photo-camera' style='font-size: 2.5em;'></i>
    

Also it is possible to colorize them with color attribute of css. (jtbColors can be applicable to icons too)

        Copy
        <i class='jtb-photo-camera' style='font-size: 2.5em; color:var(--jtb_red);'></i>
<i class='jtb-photo-camera' style='font-size: 2.5em; color:var(--jtb_blue);'></i>
<i class='jtb-photo-camera' style='font-size: 2.5em; color:var(--jtb_red);'></i>
or
<i class='jtb-photo-camera jtbRed' style='font-size: 2.5em;'></i>
<i class='jtb-photo-camera jtbBlue' style='font-size: 2.5em;'></i>
<i class='jtb-photo-camera jtbYellow' style='font-size: 2.5em; '></i>