TheBestTutorials.css Icons
Icon Libraries
With subhodaya.css you can use any icon library like:
- Font Awesome Icons
- Google Material Icons
- Bootstrap Icons
Using Icons
To use an icon, just add the name of the icon to the class of an HTML element.
To control the size of the icon, change the font-size property of the icon, or use the TheBestTutorials-size classes:
- TheBestTutorials-tiny
- TheBestTutorials-small
- TheBestTutorials-large
- TheBestTutorials-xxlarge
- TheBestTutorials-xxxlarge
Font Awesome Icons
fa fa-home
fa fa-bars
fa fa-arrow-left
fa fa-arrow-right
fa fa-search
fa fa-close
fa fa-refresh
fa fa-trash
fa fa-male
fa fa-car
fa fa-truck
fa fa-plane
Example
<!DOCTYPE html>
<html>
<title>subhodaya.css</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-cloud subhodaya-large"></i>
<i class="fa fa-cloud subhodaya-xlarge"></i>
<i class="fa fa-cloud subhodaya-xxlarge"></i>
<i class="fa fa-cloud subhodaya-xxxlarge"></i>
<i class="fa fa-cloud subhodaya-text-teal" style="font-size:64px"></i>
</body>
</html>
Try It Yourself »
<html>
<title>subhodaya.css</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-cloud subhodaya-large"></i>
<i class="fa fa-cloud subhodaya-xlarge"></i>
<i class="fa fa-cloud subhodaya-xxlarge"></i>
<i class="fa fa-cloud subhodaya-xxxlarge"></i>
<i class="fa fa-cloud subhodaya-text-teal" style="font-size:64px"></i>
</body>
</html>
For a complete list of icons: Visit our icon reference
Google Material Design Icons
home
home
home
menu
menu
menu
arrow_back
arrow_back
arrow_back
arrow_forward
arrow_forward
arrow_forward
search
search
search
close
close
close
refresh
refresh
refresh
delete
delete
delete
person
person
person
directions_car
directions_car
directions_car
local_shipping
local_shipping
local_shipping
local_airport
local_airport
local_airport
Example
<!DOCTYPE html>
<html>
<title>subhodaya.css</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">cloud</i>
<i class="material-icons subhodaya-large">cloud</i>
<i class="material-icons subhodaya-xlarge">cloud</i>
<i class="material-icons subhodaya-xxlarge">cloud</i>
<i class="material-icons subhodaya-xxxlarge">cloud</i>
<i class="material-icons subhodaya-text-teal" style="font-size:64px">cloud</i>
</body>
</html>
Try It Yourself »
<html>
<title>subhodaya.css</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">cloud</i>
<i class="material-icons subhodaya-large">cloud</i>
<i class="material-icons subhodaya-xlarge">cloud</i>
<i class="material-icons subhodaya-xxlarge">cloud</i>
<i class="material-icons subhodaya-xxxlarge">cloud</i>
<i class="material-icons subhodaya-text-teal" style="font-size:64px">cloud</i>
</body>
</html>
Bootstrap Icons
home
menu-hamburger
arrow_back
arrow_forward
search
remove
refresh
trash
user
file
plane
Example
<!DOCTYPE html>
<html>
<title>subhodaya.css</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-cloud subhodaya-large"></i>
<i class="glyphicon glyphicon-cloud subhodaya-xlarge"></i>
<i class="glyphicon glyphicon-cloud subhodaya-xxlarge"></i>
<i class="glyphicon glyphicon-cloud subhodaya-xxxlarge"></i>
<i class="glyphicon glyphicon-cloud subhodaya-text-teal" style="font-size:64px"></i>
</body>
</html>
Try It Yourself »
<html>
<title>subhodaya.css</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-cloud subhodaya-large"></i>
<i class="glyphicon glyphicon-cloud subhodaya-xlarge"></i>
<i class="glyphicon glyphicon-cloud subhodaya-xxlarge"></i>
<i class="glyphicon glyphicon-cloud subhodaya-xxxlarge"></i>
<i class="glyphicon glyphicon-cloud subhodaya-text-teal" style="font-size:64px"></i>
</body>
</html>
