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

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 – 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

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 – Toggle Icons

Material – Toggle Icons ”; Previous Next This chapter explains the usage of Google”s (Material) Toggle 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) Toggle icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs − Usage Result check_box check_box check_box_outline_blank check_box_outline_blank indeterminate_check_box indeterminate_check_box radio_button_checked radio_button_checked radio_button_unchecked radio_button_unchecked star star star_border star_border star_half star_half Print Page Previous Next Advertisements ”;

Aug 10

Material – Navigation Icons

Material – Navigation Icons ”; Previous Next This chapter explains the usage of Google”s (Material) Navigation 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) Navigation icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs − Usage Result apps apps arrow_back arrow_back arrow_drop_down arrow_drop_down arrow_drop_down_circle arrow_drop_down_circle arrow_drop_up arrow_drop_up arrow_forward arrow_forward cancel cancel check check chevron_left chevron_left chevron_right chevron_right close close expand_less expand_less expand_more expand_more fullscreen fullscreen fullscreen_exit fullscreen_exit menu menu more_horiz more_horiz more_vert more_vert refresh refresh Print Page Previous Next Advertisements ”;

Aug 10

Web Icons – Useful Resources

Web Icons – Useful Resources ”; Previous Next The following resources contain additional information on Web Icons. Please use them to get more in-depth knowledge on this. Useful Video Courses TKinter Course – Build Python GUI Apps 49 Lectures 4 hours John Elder More Detail Adobe Xd Course – UI / UX Design, Prototype And Getting A Job 128 Lectures 11.5 hours Aleksandar Cucukovic More Detail Adobe Xd Animation – Complete Guide From Icons To UI 104 Lectures 11.5 hours Aleksandar Cucukovic More Detail How To Use Android: Beginners Guide for Smartphones, Tablets 98 Lectures 8 hours Kopias Csaba More Detail Learn Web Design From Scratch 68 Lectures 9.5 hours Marwa Radwan More Detail Create Twitter Clone Using Laravel 82 Lectures 5 hours Mustafa Alawi More Detail 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 ”;