Introduction
This chapter demonstrates about the W3CSS Icons which are used to navigate a computer system or mobile system following are the concepts covered in this chapter.
- Font Awesome Icons
- Google Material Design Icons
- Bootstrap Icons
Description
In order to use the Icon library which can be included from a Content Delivery Network in the <head> Section In order to use these icons user need to add the name of the icon class to inline HTML Elements. While adding the Icons <i> and <span> elements are widely used. User can control icon size and font size property by using the w3-size classes which are shown below.
W3.CSS contains the several types of Icons In which The Image below demonstrates the Some Font Awasome Icons as shown below.
The code below demonstrates the Some Font Awasome Icons as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>
<div class="w3-container">
<h1>Using Font Awesome Icons</h1>
<div class="w3-padding w3-xlarge w3-blue">
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
Welcome!
</div>
<div class="w3-padding w3-xlarge w3-text-orange">
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
Welcome!
</div>
<ul class="w3-ul">
<li><i class="fa fa-home"></i> Home SPLESSONS</li>
<li class="w3-large"><i class="fa fa-home"></i> Home SPLESSONS</li>
<li class="w3-xlarge"><i class="fa fa-home"></i> Home SPLESSONS</li>
<li class="w3-xxlarge"><i class="fa fa-home"></i> Home SPLESSONS</li>
<li class="w3-xxxlarge"><i class="fa fa-home"></i> Home SPLESSONS</li>
<li class="w3-jumbo w3-blue"><i class="fa fa-home"></i> Home SPLESSONS</li>
</ul>
<p><button class="w3-btn w3-orange w3-xlarge">Button<i class="w3-margin-left fa fa-home"></i></button></p>
<p><i class="w3-jumbo w3-spin fa fa-home"></i></p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
| Class | Description |
|---|---|
| w3-tiny | By which user can get very small size icon. |
| w3-small | By which user can get small size icon. |
| w3-large | By which user can get very large size icon. |
| w3-xlarge | By which user can get extra large size icon. |
| w3-xxlarge | By which user can get very extra large size icon. |
| w3-xxxlarge | By which user can get very high extra large size icon. |
| w3-card-24 | Which is the container for the HTML content with 24px shadow border. |
Description
In these Icons W3.CSS also have some Google Material Design Icons which can be easily added in Inline HTML elements by using the icons names. The image below demonstrates the Google material design icons as shown.
The code below demonstrates the Google Material Design icons as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.material-icons {vertical-align:-14%}
</style>
<body>
<div class="w3-container">
<h1>Using Google Icons</h1>
<div class="w3-padding w3-xlarge w3-blue">
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
Welcome!
</div>
<div class="w3-padding w3-xlarge w3-text-orange">
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
Welcome!
</div>
<ul class="w3-ul">
<li><i class="material-icons">home</i> Home SPLESSONS</li>
<li class="w3-large"><i class="material-icons w3-large">home</i> Home SPLESSONS</li>
<li class="w3-xlarge"><i class="material-icons w3-xlarge">home</i> Home SPLESSONS</li>
<li class="w3-xxlarge"><i class="material-icons w3-xxlarge">home</i> Home SPLESSONS</li>
<li class="w3-xxxlarge"><i class="material-icons w3-xxxlarge">home</i> Home SPLESSONS</li>
<li class="w3-jumbo w3-blue"><i class="material-icons w3-jumbo">home</i> Home SPLESSONS</li>
</ul>
<p><button class="w3-btn w3-orange w3-xlarge">Button<i class="w3-margin-left material-icons">home</i></button></p>
<p><i class="material-icons w3-spin w3-jumbo">home</i></p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In these Icons W3.CSS also have some Bootstrap Icons which can be easily added in Inline HTML elements by using the icons names. The image below demonstrates the Bootstrap icons as shown.
The code below demonstrates the Bootstrap icons as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<div class="w3-container">
<h1>Using Bootstrap Icons</h1>
<div class="w3-padding w3-xlarge w3-blue">
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
Welcome!
</div>
<div class="w3-padding w3-xlarge w3-text-orange">
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
Welcome!
</div>
<ul class="w3-ul">
<li><i class="glyphicon glyphicon-home"></i> Home SPLESSONS</li>
<li class="w3-large"><i class="glyphicon glyphicon-home"></i> Home SPLESSONS</li>
<li class="w3-xlarge"><i class="glyphicon glyphicon-home"></i> Home SPLESSONS</li>
<li class="w3-xxlarge"><i class="glyphicon glyphicon-home"></i> Home SPLESSONS</li>
<li class="w3-xxxlarge"><i class="glyphicon glyphicon-home"></i> Home SPLESSONS</li>
<li class="w3-jumbo w3-blue"><i class="glyphicon glyphicon-home"></i> Home SPLESSONS</li>
</ul>
<br>
<p><button class="w3-btn w3-orange w3-xlarge">Button<i class="w3-margin-left glyphicon glyphicon-home"></i></button></p>
<p><i class="glyphicon glyphicon-home w3-spin w3-jumbo"></i></p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Icon should be used to navigate a computer system.
- User should be include the icon with its name.
- W3.CSS have several types of Icons.