Integration | JTB Icons v1.1

Sections AboutGetting startedUsageIntegration How to use Styling AnimatingDig deeperUpcoming releases Change log Contribute Licence

Integration

The methods for including JTB Icons into your project, and the library details.

Files and directory structure

To avoid unnecessary loading processes in projects we categorized our icons as three core packs:

First one includes the regular icons and its variations (Circle / Square / Rounded) which are the icons that blend in perfect with default font weight of texts,
Second one includes the light icons and its variations (Circle / Square / Rounded) which are lighter forms of the regular icons,
The last one includes brand icons and its varaitions (Circle / Square / Rounded) which are basicly the logos of different products and companies.

Since it is possible to use one or more packs in projects (depending on the need) we seperated their definitions and codes from each other via adding them into different files.

In addition to font packs, we also have another CSS file that allows you to manipulate icons. Animations, styles, and positioning classes are all defined in this file.

In the light of all these informations, the file and folder structure of JTB Icons is as follows.

jtbIcons_v1.1
- fonts
  - jtbIB.eot // Brand icons (EOT)
  - jtbIB.svg // Brand icons (SVG)
  - jtbIB.ttf // Brand icons (TTF)
  - jtbIB.woff // Brand icons (WOFF)
  - jtbIL.eot // Light icons (EOT)
  - jtbIL.svg // Light icons (SVG)
  - jtbIL.ttf // Light icons (TTF)
  - jtbIL.woff // Light icons (WOFF)
  - jtbIR.eot // Regular icons (EOT)
  - jtbIR.svg // Regular icons (SVG)
  - jtbIR.ttf // Regular icons (TTF)
  - jtbIR.woff // Regular icons (WOFF)
- jtbIB.css // Brand icons
- jtbIL.css // Light icons
- jtbIR.css // Regular icons
- jtbI.css // Styling & animation & manipulation classes

Inclusion

Depending on your needs, you can include related files into your projects and leave others unused. The integration of files can be done via two different methods:

1. Host yourself

Since we developed JTB Icons as open source, you can simply download and include its files into your project. If you like control over your files, this method is recommended by us.

Download

Once you download the zip, extract all them into your project directory and include your desired CSS files into your code via <link> elements.

								<!-- Adds Brand Icons and Variations -->
	<link rel='stylesheet' href='FILE_PATH_OF_YOURS/jtbIB.css'>

<!-- Adds Light Icons and Variations -->
	<link rel='stylesheet' href='FILE_PATH_OF_YOURS/jtbIL.css'>

<!-- Adds Regular Icons and Variations -->
	<link rel='stylesheet' href='FILE_PATH_OF_YOURS/jtbIR.css'>

<!-- Adds Animations, Styles and Manipulation classes -->
	<link rel='stylesheet' href='FILE_PATH_OF_YOURS/jtbI.css'>

Important: At this point keep in mind that the CSS files tries to get the content of icons from fonts folder. If you want to rename it or move it somewhere else, you need to change the file name and location in the top side of each CSS files to define your related path.

2. Use our sources

If you don't want to deal with downloading and installing manually, you can simply add the library from our repositories directly into your project. For doing this, simply add following codes into your <head> element.

								<!-- Adds Brand Icons and Variations -->
	<link rel='stylesheet' href='https://www.jtblabs.com/cdn/jtb_icons/v1.1/css/jtbIB.css' integrity='sha384-Fo+Hmus1NCHBPd1sIRNKcSuvKEI1DHh2dgz4nob2GXcCdNgZJ9WheuXlsD7IepM+' crossorigin='anonymous'>

<!-- Adds Light Icons and Variations -->
	<link rel='stylesheet' href='https://www.jtblabs.com/cdn/jtb_icons/v1.1/css/jtbIL.css' integrity='sha384-VVl4z2IJ0dQbZD7fqYrUDuxXOvrweVj97TPDzyIANyLblCtT8436jafngD4lANG5' crossorigin='anonymous'>

<!-- Adds Regular Icons and Variations -->
	<link rel='stylesheet' href='https://www.jtblabs.com/cdn/jtb_icons/v1.1/css/jtbIR.css' integrity='sha384-7UD29cL/d/KXykS1+EtZMp0T41b8TlgweKeHmMTnS9wjeQRh6Scrs3w569zRQLkO' crossorigin='anonymous'>

<!-- Adds Animations, Styles and Manipulation classes -->
	<link rel='stylesheet' href='https://www.jtblabs.com/cdn/jtb_icons/v1.0/css/jtbI.css' integrity='sha384-JN5OzT5uGVyq+ibwp4RA5bNiZ+QDERwviolH9P/f67kfAJS9BwuJBSjrXrooACgR' crossorigin='anonymous'>

Starter template

To avoid any problems, here is an example starting template for you...

Important: To avoid any sizing problems make sure that you include jtbI.css file after the others.

							<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
		<meta name='viewport' content='width=device-width, initial-scale=1'>
		<title>JTB Icons - Starter Template</title>

	    <!-- JTB Icons Files In Here -->
			<link rel='stylesheet' href='FILE_PATH_OF_YOURS/jtbIB.css'>
	        <link rel='stylesheet' href='FILE_PATH_OF_YOURS/jtbIL.css'>
	        <link rel='stylesheet' href='FILE_PATH_OF_YOURS/jtbIR.css'>
			<link rel='stylesheet' href='FILE_PATH_OF_YOURS/jtbI.css'>
	</head>
	<body>
		...
	</body>
</html>

Getting started How to use