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 - Communication Icons
Material - Communication Icons
This chapter explains the usage of Google s (Material) Communication 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) Communication 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">business</i> | business |
| <i class="material-icons custom">call</i> | call |
| <i class="material-icons custom">call_made</i> | call_made |
| <i class="material-icons custom">call_merge</i> | call_merge |
| <i class="material-icons custom">call_missed</i> | call_missed |
| <i class="material-icons custom">call_received</i> | call_received |
| <i class="material-icons custom">call_sppt</i> | call_sppt |
| <i class="material-icons custom">chat</i> | chat |
| <i class="material-icons custom">chat_bubble</i> | chat_bubble |
| <i class="material-icons custom">chat_bubble_outpne</i> | chat_bubble_outpne |
| <i class="material-icons custom">clear_all</i> | clear_all |
| <i class="material-icons custom">comment</i> | comment |
| <i class="material-icons custom">contact_phone</i> | contact_phone |
| <i class="material-icons custom">contacts</i> | contacts |
| <i class="material-icons custom">dialer_sip</i> | dialer_sip |
| <i class="material-icons custom">dialpad</i> | dialpad |
| <i class="material-icons custom">forum</i> | forum |
| <i class="material-icons custom">import_export</i> | import_export |
| <i class="material-icons custom">invert_colors_off</i> | invert_colors_off |
| <i class="material-icons custom">pve_help</i> | pve_help |
| <i class="material-icons custom">location_off</i> | location_off |
| <i class="material-icons custom">location_on</i> | location_on |
| <i class="material-icons custom">message</i> | message |
| <i class="material-icons custom">no_sim</i> | no_sim |
| <i class="material-icons custom">phone</i> | phone |
| <i class="material-icons custom">phonepnk_erase</i> | phonepnk_erase |
| <i class="material-icons custom">phonepnk_lock</i> | phonepnk_lock |
| <i class="material-icons custom">phonepnk_ring</i> | phonepnk_ring |
| <i class="material-icons custom">phonepnk_setup</i> | phonepnk_setup |
| <i class="material-icons custom">portable_wifi_off</i> | portable_wifi_off |
| <i class="material-icons custom">present_to_all</i> | present_to_all |
| <i class="material-icons custom">ring_volume</i> | ring_volume |
| <i class="material-icons custom">speaker_phone</i> | speaker_phone |
| <i class="material-icons custom">stay_current_landscape</i> | stay_current_landscape |
| <i class="material-icons custom">stay_current_portrait</i> | stay_current_portrait |
| <i class="material-icons custom">stay_primary_landscape</i> | stay_primary_landscape |
| <i class="material-icons custom">stay_primary_portrait</i> | stay_primary_portrait |
| <i class="material-icons custom">swap_calls</i> | swap_calls |
| <i class="material-icons custom">textsms</i> | textsms |
| <i class="material-icons custom">voicemail</i> | voicemail |
| <i class="material-icons custom">vpn_key</i> | vpn_key |
| <i class="material-icons custom">email</i> | |
| <i class="material-icons custom">call_end</i> | call_end |