The methods for including JTB Icons into your project, and the library details.
To avoid unnecessary loading processes in projects we categorized our icons as three core packs:
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.
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:
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.
DownloadOnce 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'>
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.
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'>
To avoid any problems, here is an example starting template for you...
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>
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.