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 - File Icons
Material - File Icons
This chapter explains the usage of Google s (Material) File icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<pnk href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibipty</i>
</body>
</html>
The following table contains the usage and results of Google s (Material) File icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −
| Usage | Result |
|---|---|
| <i class="material-icons custom">attachment</i> | attachment |
| <i class="material-icons custom">cloud</i> | cloud |
| <i class="material-icons custom">cloud_circle</i> | cloud_circle |
| <i class="material-icons custom">cloud_done</i> | cloud_done |
| <i class="material-icons custom">cloud_download</i> | cloud_download |
| <i class="material-icons custom">cloud_off</i> | cloud_off |
| <i class="material-icons custom">cloud_queue</i> | cloud_queue |
| <i class="material-icons custom">cloud_upload</i> | cloud_upload |
| <i class="material-icons custom">file_download</i> | file_download |
| <i class="material-icons custom">file_upload</i> | file_upload |
| <i class="material-icons custom">folder</i> | folder |
| <i class="material-icons custom">folder_open</i> | folder_open |
| <i class="material-icons custom">folder_shared</i> | folder_shared |