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 - Social Icons
Material - Social Icons
This chapter explains the usage of Google s (Material) Social 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) Social 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">cake</i> | cake |
| <i class="material-icons custom">domain</i> | domain |
| <i class="material-icons custom">group</i> | group |
| <i class="material-icons custom">group_add</i> | group_add |
| <i class="material-icons custom">location_city</i> | location_city |
| <i class="material-icons custom">mood</i> | mood |
| <i class="material-icons custom">mood_bad</i> | mood_bad |
| <i class="material-icons custom">notifications</i> | notifications |
| <i class="material-icons custom">notifications_active</i> | notifications_active |
| <i class="material-icons custom">notifications_none</i> | notifications_none |
| <i class="material-icons custom">notifications_off</i> | notifications_off |
| <i class="material-icons custom">notifications_paused</i> | notifications_paused |
| <i class="material-icons custom">pages</i> | pages |
| <i class="material-icons custom">party_mode</i> | party_mode |
| <i class="material-icons custom">people</i> | people |
| <i class="material-icons custom">people_outpne</i> | people_outpne |
| <i class="material-icons custom">person</i> | person |
| <i class="material-icons custom">person_add</i> | person_add |
| <i class="material-icons custom">person_outpne</i> | person_outpne |
| <i class="material-icons custom">plus_one</i> | plus_one |
| <i class="material-icons custom">poll</i> | poll |
| <i class="material-icons custom">pubpc</i> | pubpc |
| <i class="material-icons custom">school</i> | school |
| <i class="material-icons custom">share</i> | share |
| <i class="material-icons custom">whatshot</i> | whatshot |