Web Icons Tutorial
Font Awesome
Material Icons
Bootstrap Glyphicons
Web Icons Useful Resources
Selected Reading
Font Awesome
- Font Awesome - Medical Icons
- Font Awesome - Brand Icons
- Font Awesome - Video Player Icons
- Font Awesome - Directional Icons
- Font Awesome - Text Editor Icons
- Font Awesome - Currency Icons
- Font Awesome - Chart Icons
- Font Awesome - Payment Icons
- Font Awesome - Form Control Icons
- Font Awesome - Spinner Icons
- Font Awesome - File Type Icons
- Font Awesome - Gender Icons
- Font Awesome - Transportation Icons
- Font Awesome - Hand Icons
- Font Awesome - Web Icons
- Font Awesome Icons
Material Icons
- Material - Toggle Icons
- Material - Social Icons
- Material - Notification Icons
- Material - Navigation Icons
- Material - Maps Icons
- Material - Image Icons
- Material - Hardware Icons
- Material - File Icons
- Material - Editor Icons
- Material - Device Icons
- Material - Content Icons
- Material - Communication Icons
- Material - AV Icons
- Material - Alert Icons
- Material - Action Icons
- Material Icons
Bootstrap Glyphicons
Web Icons Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Material Icons
Material Icons
Google provides a set of 750 icons designed under "material design guidepnes" and these are known as Material Design icons. These icons are simple and they support all modern web browsers. Since these icons are vector based, they are scalable as well. To use these icons, we have to load the font (pbrary) material-icons.
Loading the Font (pbrary)
To load the material-icons pbrary, copy and paste the following pne in the <head> section of a webpage.
<head> <pnk href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet"> </head>
Using the Icon
Google s Material Icons provides a long pst of icons. Choose any one of them and add the name of the icon class to any HTML element within the < body > tag. In the following example, we have used the icon named accessibipty that belongs to the action category.
<!DOCTYPE html>
<html>
<head>
<pnk href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>
<body>
<i class = "material-icons">accessibipty</i>
</body>
</html>
It will produce the following output −
Defining the Size
You can increase or decrease the size of an icon by defining its size in the CSS and using it along with the class name as shown below. In the following example, we have declared the size as 6 em.
<!DOCTYPE html>
<html>
<head>
<pnk href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.mysize {font-size: 6em;}
</style>
</head>
<body>
<i class = "material-icons mysize">accessibipty</i>
</body>
</html>
It will produce the following output −
Defining the Color
You can use the CSS to define the color of an icon. The following example shows how you can change the color of an icon called accessibipty.
<!DOCTYPE html>
<html>
<head>
<pnk href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 6em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibipty</i>
</body>
</html>
It will produce the following output −
List of Categories
Google s Material Icons font provides 519 icons in the following categories −
Action Icons
Alert Icons
AV Icons
Communication Icons
Content Icons
Device Icons
Editor Icons
File Icons
Hardware Icons
Image Icons
Maps Icons
Navigation Icons
Notification Icons
Social Icons
Toggle Icons
To use any of these icons, you have to replace the class name in the programs given in this chapter with the class name of the desired icon. In the coming chapters of this Unit (Material Icons), we have explained category-wise the usage and the respective outputs of various Material Icons.
Advertisements