web Icons Archives - Page 2 of 4 - Donotsad where can learn any thing work project and make money

Aug 10

Font Awesome – Hand Icons

Font Awesome – Hand Icons ”; Previous Next This chapter explains the usage of Font Awesome Hand 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> </body> </html> The following table shows the usage and the results of Font Awesome Hand icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs − Usage Result Print Page Previous Next Advertisements ”;

Aug 10

Material Icons

Material Icons ”; Previous Next Google provides a set of 750 icons designed under “material design 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. Loading the Font (library) To load the material-icons library, copy and paste the following line in the <head> section of a webpage. <head> <link href = “https://fonts.googleapis.com/icon?family=Material+Icons” rel = “stylesheet”> </head> Using the Icon Google”s Material Icons provides a long list 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 accessibility that belongs to the action category. Live Demo <!DOCTYPE html> <html> <head> <link href = “https://fonts.googleapis.com/icon?family=Material+Icons” rel = “stylesheet”> </head> <body> accessibility </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. Live Demo <!DOCTYPE html> <html> <head> <link href = “https://fonts.googleapis.com/icon?family=Material+Icons” rel = “stylesheet”> <style> i.mysize {font-size: 6em;} </style> </head> <body> accessibility </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 accessibility. Live Demo <!DOCTYPE html> <html> <head> <link href = “https://fonts.googleapis.com/icon?family=Material+Icons” rel = “stylesheet”> <style> i.custom {font-size: 6em; color: green;} </style> </head> <body> accessibility </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. Print Page Previous Next Advertisements ”;

Aug 10

Web Icons – Home

Web Icons Tutorial PDF Version Quick Guide Resources Job Search Discussion We have a number of Icon Fonts (libraries) available that can be used on HTML pages just the way we use normal text fonts. Font Awesome, Bootstrap Glyphicons, and Google”s Material Icons are the prominent Icon Fonts used frequently by web developers. This tutorial explains how to use these Icon Fonts in practice. Audience This tutorial is meant for HTML developers who would like to use icons on their webpages. Prerequisites Before proceeding with this tutorial, you should have a good understanding of HTML and CSS. Print Page Previous Next Advertisements ”;

Aug 10

Font Awesome Icons

Font Awesome Icons ”; Previous Next Font Awesome icons library provides 519 free scalable vector icons. This library is completely free for both personal and commercial use. Originally designed for Bootstrap, these icons can be customized easily. Loading the Font Library To load the Font Awesome library, copy and paste the following line in the <head> section of the webpage. <head> <link rel = “stylesheet” href = “http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css”> </head> Using the Icon Font Awesome provides several icons. Choose 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 of the Indian currency. Live Demo <html> <head> <link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css”> </head> <body> </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 using CSS and using it along with the class name, as shown below. In the given example, we have declared the size as 6 em. Live Demo <html> <head> <link rel = “stylesheet” href = “http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css”> <style> i.mysize {font-size: 10em;} </style> </head> <body> </body> </html> It will produce the following output − Defining the Color Just like size, you can define the color of the icons using CSS. The following example shows how to change the color of the Indian currency icon. 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: 6em; color: red;} </style> </head> <body> </body> </html> List of Categories Font Awesome provides 519 icons in the following categories − Web Application Icons Hand Icons Transportation Icons Gender Icons File Type Icons Spinner Icons Form Control Icons Payment Icons Chart Icons Currency Icons Text editor Icons Directional Icons Video Player Icons Brand 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 (Font Awesome), we have explained category-wise the usage and the respective outputs of various Font Awesome icons. Print Page Previous Next Advertisements ”;

Aug 10

Font Awesome – Transportation Icons

Font Awesome – Transportation Icons ”; Previous Next This chapter explains the usage of Font Awesome Transportation 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> </body> </html> The following table shows the usage and the results of Font Awesome Transportation icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs − Usage Result Print Page Previous Next Advertisements ”;

Aug 10

Web Icons – Discussion

Discuss Web Icons ”; Previous Next We have a number of Icon Fonts (libraries) available that can be used on HTML pages just the way we use normal text fonts. Font Awesome, Bootstrap Glyphicons, and Google”s Material Icons are the prominent Icon Fonts used frequently by web developers. This tutorial explains how to use these Icon Fonts in practice. Print Page Previous Next Advertisements ”;

Aug 10

Material – Notification Icons

Material – Notification Icons ”; Previous Next This chapter explains the usage of Google”s (Material) Notification 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> accessibility </body> </html> The following table contains the usage and results of Google”s (Material) Notification icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs − Usage Result adb adb airline_seat_flat airline_seat_flat airline_seat_flat_angled airline_seat_flat_angled airline_seat_individual_suite airline_seat_individual_suite airline_seat_legroom_reduced airline_seat_legroom_reduced airline_seat_recline_extra airline_seat_recline_extra airline_seat_recline_normal airline_seat_recline_normal bluetooth_audio bluetooth_audio confirmation_number confirmation_number disc_full disc_full do_not_disturb do_not_disturb do_not_disturb_alt do_not_disturb_alt drive_eta drive_eta event_available event_available event_busy event_busy event_note event_note folder_special folder_special live_tv live_tv mms mms more more network_locked network_locked ondemand_video ondemand_video personal_video personal_video phone_bluetooth_speaker phone_bluetooth_speaker phone_forwarded phone_forwarded phone_in_talk phone_in_talk phone_locked phone_locked phone_missed phone_missed phone_paused phone_paused power power sd_card sd_card sim_card_alert sim_card_alert sms sms sms_failed sms_failed sync sync sync_disabled sync_disabled sync_problem sync_problem system_update system_update tap_and_play tap_and_play time_to_leave time_to_leave vibration vibration voice_chat voice_chat vpn_lock vpn_lock wc wc wifi wifi Print Page Previous Next Advertisements ”;

Aug 10

Bootstrap – Components

Bootstrap Components ”; Previous Next This chapter explains the usage of Bootstrap Glyphicons (Components). 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://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”> <i.custom {font-size: 2em; color: blue;}> </head> <body> </body> </html> The following table contains the usage and results of Bootstrap Glyphicons (Components). Replace the < body > tag of the above program with the code given in the table to get the respective outputs − Usage Result Print Page Previous Next Advertisements ”;

Aug 10

Material – Alert Icons

Material – Alert Icons ”; Previous Next This chapter explains the usage of Google”s (Material) Alert 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> accessibility </body> </html> The following table contains the usage and results of Google”s (Material) Alert icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs − Usage Result add_alert add_alert error error error_outline error_outline warning warning Print Page Previous Next Advertisements ”;

Aug 10

Material – Content Icons

Material – Content Icons ”; Previous Next This chapter explains the usage of Google”s (Material) Content 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> accessibility </body> </html> The following table contains the usage and results of Google”s (Material) Content icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs − Usage Result add add add_box add_box add_circle add_circle add_circle_outline add_circle_outline archive archive backspace backspace block block clear clear content_copy content_copy content_cut content_cut content_paste content_paste create create drafts drafts filter_list filter_list flag flag font_download font_download forward forward gesture gesture inbox inbox link link mail mail markunread markunread redo redo remove remove remove_circle remove_circle remove_circle_outline remove_circle_outline reply reply reply_all reply_all report report save save select_all select_all send send sort sort text_format text_format stay_current_portrait stay_current_portrait undo undo Print Page Previous Next Advertisements ”;