Material – Hardware Icons

Material – Hardware Icons ”; Previous Next This chapter explains the usage of Google”s (Material) Hardware 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> <link 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”>accessibility</i> </body> </html> The following table contains the usage and results of Google”s (Material) Hardware 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”>cast</i> cast <i class=”material-icons custom”>cast_connected</i> cast_connected <i class=”material-icons custom”>computer</i> computer <i class=”material-icons custom”>desktop_mac</i> desktop_mac <i class=”material-icons custom”>desktop_windows</i> desktop_windows <i class=”material-icons custom”>developer_board</i> developer_board <i class=”material-icons custom”>device_hub</i> device_hub <i class=”material-icons custom”>dock</i> dock <i class=”material-icons custom”>gamepad</i> gamepad <i class=”material-icons custom”>headset</i> headset <i class=”material-icons custom”>headset_mic</i> headset_mic <i class=”material-icons custom”>keyboard</i> keyboard <i class=”material-icons custom”>keyboard_arrow_down</i> keyboard_arrow_down <i class=”material-icons custom”>keyboard_arrow_left</i> keyboard_arrow_left <i class=”material-icons custom”>keyboard_arrow_right</i> keyboard_arrow_right <i class=”material-icons custom”>keyboard_arrow_up</i> keyboard_arrow_up <i class=”material-icons custom”>keyboard_backspace</i> keyboard_backspace <i class=”material-icons custom”>keyboard_capslock</i> keyboard_capslock <i class=”material-icons custom”>keyboard_hide</i> keyboard_hide <i class=”material-icons custom”>keyboard_return</i> keyboard_return <i class=”material-icons custom”>keyboard_tab</i> keyboard_tab <i class=”material-icons custom”>keyboard_voice</i> keyboard_voice <i class=”material-icons custom”>laptop</i> laptop <i class=”material-icons custom”>laptop_chromebook</i> laptop_chromebook <i class=”material-icons custom”>laptop_mac</i> laptop_mac <i class=”material-icons custom”>laptop_windows</i> laptop_windows <i class=”material-icons custom”>memory</i> memory <i class=”material-icons custom”>mouse</i> mouse <i class=”material-icons custom”>phone_android</i> phone_android <i class=”material-icons custom”>phone_iphone</i> phone_iphone <i class=”material-icons custom”>phonelink</i> phonelink <i class=”material-icons custom”>phonelink_off</i> phonelink_off <i class=”material-icons custom”>power_input</i> power_input <i class=”material-icons custom”>router</i> router <i class=”material-icons custom”>scanner</i> scanner <i class=”material-icons custom”>security</i> security <i class=”material-icons custom”>sim_card</i> sim_card <i class=”material-icons custom”>smartphone</i> smartphone <i class=”material-icons custom”>speaker</i> speaker <i class=”material-icons custom”>speaker_group</i> speaker_group <i class=”material-icons custom”>tablet</i> tablet <i class=”material-icons custom”>tablet_android</i> tablet_android <i class=”material-icons custom”>tablet_mac</i> tablet_mac <i class=”material-icons custom”>toys</i> toys <i class=”material-icons custom”>tv</i> tv <i class=”material-icons custom”>watch</i> watch Print Page Previous Next Advertisements ”;

Font Awesome – Form Control Icons

Font Awesome – Form Control Icons ”; Previous Next This chapter explains the usage of Font Awesome Form Control icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below. <html> <head> <link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css”> <style> i.custom {font-size: 2em; color: gray;} </style> </head> <body> <i class = “fa fa-adjust custom”></i> </body> </html> The following table shows the usage and the results of Font Awesome Form Control 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=”fa fa-check-square custom”></i> <i class=”fa fa-check-square-o custom”></i> <i class=”fa fa-circle custom”></i> <i class=”fa fa-circle-o custom”></i> <i class=”fa fa-dot-circle-o custom”></i> <i class=”fa fa-minus-square custom”></i> <i class=”fa fa-minus-square-o custom”></i> <i class=”fa fa-plus-square custom”></i> <i class=”fa fa-plus-square-o custom”></i> <i class=”fa fa-square custom”></i> <i class=”fa fa-square-o custom”></i> Print Page Previous Next Advertisements ”;

Font Awesome – Chart Icons

Font Awesome – Chart Icons ”; Previous Next This chapter explains the usage of Font Awesome Chart icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below. <html> <head> <link rel=”stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css”> <style> i.custom {font-size: 2em; color: gray;} </style> </head> <body> <i class = “fa fa-adjust custom”></i> </body> </html> The following table shows the usage and the results of Font Awesome Chart 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=”fa fa-area-chart custom”></i> <i class=”fa fa-bar-chart custom”></i> <i class=”fa fa-bar-chart-o custom”></i> <i class=”fa fa-line-chart custom”></i> <i class=”fa fa-pie-chart custom”></i> Print Page Previous Next Advertisements ”;

Font Awesome – File Type Icons

Font Awesome – File Type Icons ”; Previous Next This chapter explains the usage of Font Awesome File Type icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below. Live Demo <html> <head> <link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css”> <style> i.custom {font-size: 2em; color: gray;} </style> </head> <body> <i class = “fa fa-adjust custom”></i> </body> </html> The following table shows the usage and the results of Font Awesome File Type 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=”fa fa-file custom”></i> <i class=”fa fa-file-archive-o custom”></i> <i class=”fa fa-file-audio-o custom”></i> <i class=”fa fa-file-code-o custom”></i> <i class=”fa fa-file-excel-o custom”></i> <i class=”fa fa-file-image-o custom”></i> <i class=”fa fa-file-movie-o custom”></i> <i class=”fa fa-file-o custom”></i> <i class=”fa fa-file-pdf-o custom”></i> <i class=”fa fa-file-photo-o custom”></i> <i class=”fa fa-file-picture-o custom”></i> <i class=”fa fa-file-powerpoint-o custom”></i> <i class=”fa fa-file-video-o custom”></i> <i class=”fa fa-file-word-o custom”></i> <i class=”fa fa-file-zip-o custom”></i> <i class=”fa fa-file-sound-o custom”></i> <i class=”fa fa-file-text custom”></i> <i class=”fa fa-file-text-o custom”></i> Print Page Previous Next Advertisements ”;

Font Awesome – Currency Icons

Font Awesome – Currency Icons ”; Previous Next This chapter explains the usage of Font Awesome Currency icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below. <html> <head> <link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css”> <style> i.custom {font-size: 2em; color: gray;} </style> </head> <body> <i class = “fa fa-adjust custom”></i> </body> </html> The following table shows the usage and the results of Font Awesome Currency 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=”fa fa-bitcoin custom”></i> <i class=”fa fa-btc custom”></i> <i class=”fa fa-cny custom”></i> <i class=”fa fa-dollar custom”></i> <i class=”fa fa-eur custom”></i> <i class=”fa fa-euro custom”></i> <i class=”fa fa-gbp custom”></i> <i class=”fa fa-gg custom”></i> <i class=”fa fa-gg-circle custom”></i> <i class=”fa fa-ils custom”></i> <i class=”fa fa-inr custom”></i> <i class=”fa fa-jpy custom”></i> <i class=”fa fa-krw custom”></i> <i class=”fa fa-money custom”></i> <i class=”fa fa-rmb custom”></i> <i class=”fa fa-rouble custom”></i> <i class=”fa fa-rub custom”></i> <i class=”fa fa-ruble custom”></i> <i class=”fa fa-rupee custom”></i> <i class=”fa fa-shekel custom”></i> <i class=”fa fa-sheqel custom”></i> <i class=”fa fa-try custom”></i> <i class=”fa fa-turkish-lira custom”></i> <i class=”fa fa-usd custom”></i> <i class=”fa fa-won custom”></i> <i class=”fa fa-yen custom”></i> Print Page Previous Next Advertisements ”;

Font Awesome – Gender Icons

Font Awesome – Gender Icons ”; Previous Next This chapter explains the usage of Font Awesome Gender icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below. <html> <head> <link rel = “stylesheet” href = “http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css”> <style> i.custom {font-size: 2em; color: gray;} </style> </head> <body> <i class = “fa fa-adjust custom”></i> </body> </html> The following table shows the usage and the results of Font Awesome Gender 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=”fa fa-genderless custom”></i> <i class=”fa fa-intersex custom”></i> <i class=”fa fa-mars custom”></i> <i class=”fa fa-mars-double custom”></i> <i class=”fa fa-mars-stroke custom”></i> <i class=”fa fa-mars-stroke-h custom”></i> <i class=”fa fa-mars-stroke-v custom”></i> <i class=”fa fa-mercury custom”></i> <i class=”fa fa-neuter custom”></i> <i class=”fa fa-transgender custom”></i> <i class=”fa fa-transgender-alt custom”></i> <i class=”fa fa-venus custom”></i> <i class=”fa fa-venus-double custom”></i> <i class=”fa fa-venus-mars custom”></i> Print Page Previous Next Advertisements ”;

Font Awesome – Web Icons

Font Awesome – Web Application Icons ”; Previous Next This chapter explains the usage of Font Awesome Web Application icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below. <html> <head> <link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css”> <style> i.custom {font-size: 2em; color: gray;} </style> </head> <body> <i class = “fa fa-adjust custom”></i> </body> </html> The following table shows the usage and the results of Font Awesome Web Application 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= “fa fa-adjust custom”></i> <i class=”fa fa-anchor custom”></i> <i class=”fa fa-archive custom”></i> <i class=”fa fa-area-chart custom”></i> <i class=”fa fa-arrows custom”></i> <i class=”fa fa-arrows-h custom”></i> <i class=”fa fa-arrows-v custom”></i> <i class=”fa fa-asterisk custom”></i> <i class=”fa fa-at custom”></i> <i class=”fa fa-automobile custom”></i> <i class=”fa fa-balance-scale custom”></i> <i class=”fa fa-ban custom”></i> <i class=”fa fa-bank custom”></i> <i class=”fa fa-bar-chart custom”></i> <i class=”fa fa-bar-chart-o custom”></i> <i class=”fa fa-barcode custom”></i> <i class=”fa fa-bars custom”></i> <i class=”fa fa-bed custom”></i> <i class=”fa fa-beer custom”></i> <i class=”fa fa-bell custom”></i> <i class=”fa fa-wrench custom”></i> <i class=”fa fa-bell-o custom”></i> <i class=”fa fa-bell-slash custom”></i> <i class=”fa fa-bell-slash-o custom”></i> <i class=”fa fa-bicycle custom”></i> <i class=”fa fa-battery-0 custom”></i> <i class=”fa fa-battery-1 custom”></i> <i class=”fa fa-battery-2 custom”></i> <i class=”fa fa-battery-3 custom”></i> <i class=”fa fa-battery-4 custom”></i> <i class=”fa fa-battery-empty custom”></i> <i class=”fa fa-battery-quarter custom”></i> <i class=”fa fa-battery-half custom”></i> <i class=”fa fa-battery-three-quarters custom”></i> <i class=”fa fa-battery-full custom”></i> <i class=”fa fa-birthday-cake custom”></i> <i class=”fa fa-bolt custom”></i> <i class=”fa fa-bomb custom”></i> <i class=”fa fa-book custom”></i> <i class=”fa fa-bookmark custom”></i> <i class=”fa fa-bookmark-o custom”></i> <i class=”fa fa-briefcase custom”></i> <i class=”fa fa-bug custom”></i> <i class=”fa fa-building custom”></i> <i class=”fa fa-building-o custom”></i> <i class=”fa fa-bullhorn custom”></i> <i class=”fa fa-bullseye custom”></i> <i class=”fa fa-bus custom”></i> <i class=”fa fa-cab custom”></i> <i class=”fa fa-video-camera custom”></i> <i class=”fa fa-calendar custom”></i> <i class=”fa fa-calendar-check-o custom”></i> <i class=”fa fa-calendar-minus-o custom”></i> <i class=”fa fa-calendar-o custom”></i> <i class=”fa fa-calendar-plus-o custom”></i> <i class=”fa fa-calendar-times-o custom”></i> <i class=”fa fa-camera custom”></i> <i class=”fa fa-camera-retro custom”></i> <i class=”fa fa-car custom”></i> <i class=”fa fa-cc custom”></i> <i class=”fa fa-caret-square-o-down custom”></i> <i class=”fa fa-caret-square-o-left custom”></i> <i class=”fa fa-caret-square-o-right custom”></i> <i class=”fa fa-caret-square-o-up custom”></i> <i class=”fa fa-cart-arrow-down custom”></i> <i class=”fa fa-cart-plus custom”></i> <i class=”fa fa-certificate custom”></i> <i class=”fa fa-child custom”></i> <i class=”fa fa-check custom”></i> <i class=”fa fa-check-circle custom”></i> <i class=”fa fa-check-circle-o custom”></i> <i class=”fa fa-check-square custom”></i> <i class=”fa fa-check-square-o custom”></i> <i class=”fa fa-circle custom”></i> <i class=”fa fa-circle-o custom”></i> <i class=”fa fa-circle-o-notch custom”></i> <i class=”fa fa-circle-thin custom”></i> <i class=”fa fa-clock-o custom”></i> <i class=”fa fa-clone custom”></i> <i class=”fa fa-close custom”></i> <i class=”fa fa-anchor custom”></i> <i class=”fa fa-cloud-download custom”></i> <i class=”fa fa-cloud-upload custom”></i> <i class=”fa fa-code custom”></i> <i class=”fa fa-code-fork custom”></i> <i class=”fa fa-coffee custom”></i> <i class=”fa fa-cog custom”></i> <i class=”fa fa-cogs custom”></i> <i class=”fa fa-comment custom”></i> <i class=”fa fa-comment-o custom”></i> <i class=”fa fa-commenting custom”></i> <i class=”fa fa-commenting-o custom”></i> <i class=”fa fa-comments custom”></i> <i class=”fa fa-comments-o custom”></i> <i class=”fa fa-compass custom”></i> <i class=”fa fa-copyright custom”></i> <i class=”fa fa-creative-commons custom”></i> <i class=”fa fa-credit-card custom”></i> <i class=”fa fa-crop custom”></i> <i class=”fa fa-crosshairs custom”></i> <i class=”fa fa-cube custom”></i> <i class=”fa fa-cubes custom”></i> <i class=”fa fa-cutlery custom”></i> <i class=”fa fa-dashboard custom”></i> <i class=”fa fa-database custom”></i> <i class=”fa fa-desktop custom”></i> <i class=”fa fa-diamond custom”></i> <i class=”fa fa-dot-circle-o custom”></i> <i class=”fa fa-download custom”></i> <i class=”fa fa-edit custom”></i> <i class=”fa fa-ellipsis-h custom”></i> <i class=”fa fa-ellipsis-v custom”></i> <i class=”fa fa-envelope custom”></i> <i class=”fa fa-envelope-o custom”></i> <i class=”fa fa-envelope-square custom”></i> <i class=”fa fa-eraser custom”></i> <i class=”fa fa-exchange custom”></i> <i class=”fa fa-exclamation custom”></i> <i class=”fa fa-exclamation-circle custom”></i> <i class=”fa fa-exclamation-triangle custom”></i> <i class=”fa fa-external-link custom”></i> <i class=”fa fa-external-link-square custom”></i> <i class=”fa fa-eye custom”></i> <i class=”fa fa-eye-slash custom”></i> <i class=”fa fa-eyedropper custom”></i> <i class=”fa fa-fax custom”></i> <i class=”fa fa-feed custom”></i> <i class=”fa fa-female custom”></i> <i class=”fa fa-fighter-jet custom”></i> <i class=”fa fa-file-archive-o custom”></i> <i class=”fa fa-file-audio-o custom”></i> <i class=”fa fa-file-code-o custom”></i> <i class=”fa fa-file-excel-o custom”></i> <i class=”fa fa-volume-down custom”></i> <i class=”fa fa-file-movie-o custom”></i> <i class=”fa fa-file-pdf-o custom”></i> <i class=”fa fa-file-photo-o custom”></i> <i class=”fa fa-file-picture-o custom”></i> <i class=”fa fa-file-powerpoint-o custom”></i> <i class=”fa fa-file-sound-o custom”></i> <i class=”fa fa-file-video-o custom”></i> <i class=”fa fa-file-word-o custom”></i> <i class=”fa fa-file-sound-o custom”></i> <i class=”fa fa-file-video-o custom”></i> <i class=”fa fa-file-word-o custom”></i> <i class=”fa fa-file-zip-o custom”></i> <i class=”fa fa-film custom”></i> <i class=”fa fa-filter custom”></i> <i class=”fa fa-fire custom”></i> <i class=”fa fa-fire-extinguisher custom”></i> <i class=”fa fa-flag custom”></i> <i class=”fa fa-flag-checkered custom”></i> <i class=”fa fa-flag-o custom”></i> <i class=”fa fa-flash custom”></i> <i class=”fa fa-flask custom”></i> <i class=”fa fa-flask custom”></i> <i class=”fa fa-folder custom”></i> <i class=”fa fa-folder-o custom”></i> <i class=”fa fa-folder-open custom”></i> <i class=”fa fa-folder-open-o custom”></i> <i class=”fa fa-frown-o custom”></i> <i class=”fa fa-volume-off custom”></i> <i class=”fa fa-gamepad custom”></i> <i class=”fa fa-gavel custom”></i> <i class=”fa fa-gear custom”></i> <i class=”fa fa-gears custom”></i> <i class=”fa fa-gift custom”></i> <i class=”fa fa-glass custom”></i> <i class=”fa fa-globe custom”></i> <i class=”fa fa-graduation-cap custom”></i> <i class=”fa fa-group custom”></i> <i class=”fa fa-hand-grab-o custom”></i> <i class=”fa fa-hand-lizard-o custom”></i> <i class=”fa fa-hand-paper-o custom”></i> <i class=”fa fa-hand-peace-o custom”></i> <i class=”fa fa-hand-pointer-o custom”></i> <i class=”fa fa-hand-rock-o custom”></i> <i class=”fa fa-hand-scissors-o custom”></i> <i class=”fa fa-hand-spock-o custom”></i> <i class=”fa fa-hand-paper-o custom”></i> <i class=”fa fa-hdd-o custom”></i> <i class=”fa fa-headphones custom”></i> <i class=”fa fa-heart custom”></i> <i class=”fa fa-heart-o custom”></i> <i class=”fa fa-heartbeat custom”></i> <i class=”fa fa-history custom”></i> <i class=”fa fa-home custom”></i> <i class=”fa fa-hotel custom”></i> <i class=”fa fa-hourglass custom”></i> <i class=”fa fa-hourglass-start custom”></i> <i class=”fa fa-hourglass-half custom”></i> <i class=”fa fa-hourglass-end custom”></i> <i class=”fa fa-i-cursor custom”></i> <i class=”fa fa-image custom”></i> <i class=”fa fa-inbox custom”></i> <i class=”fa fa-industry custom”></i> <i class=”fa fa-info custom”></i> <i class=”fa fa-info-circle custom”></i> <i class=”fa fa-institution custom”></i> <i class=”fa fa-key custom”></i> <i class=”fa fa-keyboard-o custom”></i> <i class=”fa fa-language custom”></i> <i class=”fa fa-laptop custom”></i> <i class=”fa fa-leaf custom”></i> <i class=”fa fa-legal custom”></i> <i class=”fa fa-lemon-o custom”></i> <i class=”fa fa-level-down custom”></i> <i class=”fa fa-level-up custom”></i> <i class=”fa fa-life-bouy custom”></i> <i class=”fa fa-life-ring custom”></i> <i class=”fa fa-life-saver custom”></i> <i class=”fa fa-lightbulb-o custom”></i> <i class=”fa fa-line-chart custom”></i> <i class=”fa fa-location-arrow custom”></i> <i class=”fa fa-lock custom”></i> <i class=”fa fa-magic custom”></i> <i class=”fa fa-magnet custom”></i> <i class=”fa fa-mail-forward custom”></i> <i class=”fa fa-mail-reply custom”></i> <i class=”fa fa-mail-reply-all custom”></i> <i class=”fa fa-male custom”></i> <i class=”fa fa-map

Web Icons – Introduction

Web Icons – Introduction ”; Previous Next An icon is a symbol that is used to represent a specific action or a capability on a webpage. Icons are used in documents as well as applications and they can be either selectable or non-selectable. For example, the images that we see on the buttons of an application are all icons and these buttons are selectable. Similarly, when we use an icon as a company logo, it is normally non-selectable. In Windows environment, if we mute the system volume, it will be represented with the help of an icon, as shown below. Using web icons, we can represent a loading page, a disabled option, a link, a redirection, etc. These icons can be flipped, rotated, resized, bordered, inverted, and colored. Icon Fonts Icon Fonts contain symbols and glyphs. Once you load a desired font, you can use any of the icons provided by that font using the class name of the icon. We can also apply different colors to the icons and resize them using the CSS properties. There are several icon libraries(fonts) that provide icons. This tutorial focuses on three main fonts, namely − Font Awesome Bootstrap Glyphicons Google”s Material Icons Font Awesome This font provides 519 free scalable vector icons. This library is completely free, for both personal as well as commercial use. These icons can be customized easily. Originally, they were developed for Bootstrap. Bootstrap Glyphicons This is a library of monochromatic icons available in raster image formats, vector image formats, and as fonts. It provides over 250 glyphs in font format. You can use these fonts in your web projects. These icons are not free, however you can use them in Bootstrap based projects without having to purchase them. Google”s Material Icons Google provides about 750 icons designed under “material designed guidelines” 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 (library) material-icons. Print Page Previous Next Advertisements ”;