web Icons Archives - Donotsad where can learn any thing work project and make money

Aug 10

Font Awesome – Brand Icons

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

Aug 10

Font Awesome – Directional Icons

Font Awesome – Directional Icons ”; Previous Next This chapter explains the usage of Font Awesome Directional 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 Directional 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 – Quick Guide

Web Icons – Quick Guide ”; Previous Next Web Icons – Introduction 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. Font Awesome Icons 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. Font Awesome – Web Application Icons 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> </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

Aug 10

Material – Image Icons

Material – Image Icons ”; Previous Next This chapter explains the usage of Google”s (Material) Image 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) Image icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs − Usage Result add_to_photos add_to_photos adjust adjust assistant assistant assistant assistant audiotrack audiotrack blur_circular blur_circular blur_linear blur_linear blur_off blur_off blur_on blur_on brightness_1 brightness_1 brightness_2 brightness_2 brightness_3 brightness_3 brightness_4 brightness_4 brightness_5 brightness_5 brightness_6 brightness_6 brightness_7 brightness_7 broken_image broken_image brush brush camera camera camera_alt camera_alt camera_front camera_front camera_rear camera_rear camera_roll camera_roll center_focus_strong center_focus_strong center_focus_weak center_focus_weak collections collections collections_bookmark collections_bookmark color_lens color_lens colorize colorize compare compare control_point control_point control_point_duplicate control_point_duplicate crop crop crop_16_9 crop_16_9 crop_3_2 crop_3_2 crop_5_4 crop_5_4 crop_7_5 crop_7_5 crop_din crop_din crop_free crop_free crop_landscape crop_landscape crop_original crop_original crop_portrait crop_portrait crop_square crop_square dehaze dehaze details details edit edit exposure exposure exposure_neg_1 exposure_neg_1 exposure_plus_1 exposure_plus_1 exposure_plus_2 exposure_plus_2 exposure_zero exposure_zero filter filter filter_1 filter_1 filter_2 filter_2 filter_3 filter_3 filter_4 filter_4 filter_5 filter_5 filter_6 filter_6 filter_7 filter_7 filter_8 filter_8 filter_9 filter_9 filter_9_plus filter_9_plus filter_b_and_w filter_b_and_w filter_center_focus filter_center_focus filter_drama filter_drama filter_frames filter_frames filter_hdr filter_hdr filter_none filter_none filter_tilt_shift filter_tilt_shift filter_vintage filter_vintage flare flare flash_auto flash_auto flash_off flash_off flash_on flash_on flip flip gradient gradient grain grain grid_off grid_off grid_on grid_on hdr_off hdr_off hdr_on hdr_on hdr_strong hdr_strong hdr_weak hdr_weak healing healing image image image_aspect_ratio image_aspect_ratio iso iso landscape landscape leak_add leak_add leak_remove leak_remove lens lens looks looks looks_3 looks_3 looks_4 looks_4 looks_5 looks_5 looks_6 looks_6 looks_one looks_one looks_two looks_two loupe loupe monochrome_photos monochrome_photos movie_creation movie_creation music_note music_note nature nature nature_people nature_people wb_sunny wb_sunny navigate_next navigate_next navigate_before navigate_before palette palette panorama panorama panorama_fish_eye panorama_fish_eye panorama_horizontal panorama_horizontal panorama_vertical panorama_vertical panorama_wide_angle panorama_wide_angle photo photo photo_album photo_album photo_camera photo_camera photo_library photo_library photo_size_select_actual photo_size_select_actual photo_size_select_large photo_size_select_large photo_size_select_small photo_size_select_small picture_as_pdf picture_as_pdf portrait portrait remove_red_eye remove_red_eye rotate_90_degrees_ccw rotate_90_degrees_ccw rotate_left rotate_left rotate_right rotate_right slideshow slideshow straighten straighten style style switch_camera switch_camera switch_video switch_video tag_faces tag_faces texture texture timelapse timelapse timer timer timer_10 timer_10 timer_3 timer_3 timer_off timer_off tonality tonality transform transform tune tune view_comfy view_comfy view_compact view_compact vignette vignette wb_auto wb_auto wb_cloudy wb_cloudy wb_incandescent wb_incandescent wb_iridescent wb_iridescent Print Page Previous Next Advertisements ”;

Aug 10

Font Awesome – Spinner Icons

Font Awesome – Spinner Icons ”; Previous Next This chapter explains the usage of Font Awesome Spinner 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 Spinner 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 – Social Icons

Material – Social Icons ”; Previous Next 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> <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) Social icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs − Usage Result cake cake domain domain group group group_add group_add location_city location_city mood mood mood_bad mood_bad notifications notifications notifications_active notifications_active notifications_none notifications_none notifications_off notifications_off notifications_paused notifications_paused pages pages party_mode party_mode people people people_outline people_outline person person person_add person_add person_outline person_outline plus_one plus_one poll poll public public school school share share whatshot whatshot Print Page Previous Next Advertisements ”;

Aug 10

Material – AV Icons

Material – AV Icons ”; Previous Next This chapter explains the usage of Google”s (Material) AV 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) AV icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs − Usage Result airplay airplay album album av_timer av_timer closed_caption closed_caption equalizer equalizer explicit explicit fast_forward fast_forward fast_rewind fast_rewind forward_10 forward_10 forward_30 forward_30 forward_5 forward_5 games games hd hd hearing hearing high_quality high_quality library_add library_add library_books library_books library_music library_music loop loop mic mic mic_none mic_none mic_off mic_off movie movie pause_circle_outline pause_circle_outline new_releases new_releases not_interested not_interested pause pause pause_circle_filled pause_circle_filled play_arrow play_arrow play_circle_filled play_circle_filled play_circle_outline play_circle_outline playlist_add playlist_add queue queue queue_music queue_music radio radio recent_actors recent_actors repeat repeat repeat_one repeat_one replay replay airplay replay_10 replay_30 replay_30 replay_5 replay_5 shuffle shuffle skip_next skip_next skip_previous skip_previous snooze snooze sort_by_alpha sort_by_alpha stop stop subtitles subtitles surround_sound surround_sound video_library video_library videocam videocam videocam_off videocam_off volume_down volume_down volume_mute volume_mute volume_off volume_off volume_up volume_up web web Print Page Previous Next Advertisements ”;

Aug 10

Bootstrap Glyphicons

Bootstrap Glyphicons ”; Previous Next 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 glyphs are not free, however if you don”t have to spend anything in case you are using them in Bootstrap based projects. Loading the Font (library) To load the Bootstrap Glyphicons library, copy and paste the following line in the <head> section of the webpage. <head> <link rel = “stylesheet” href = “http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”> </head> Using the Icon Bootstrap Glyphicons provides a number of 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 tree and its class name is tree-deciduous. Live Demo <html> <head> <link rel = “stylesheet” href = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.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 in the CSS and using it along with the class name as shown below. In the following example, we have defined the size as 6 em. Live Demo <html> <head> <link rel=”stylesheet” href = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”><style> i.mysize {font-size: 6em;} </style> </head> <body> </body> </html> It will produce the following output: Defining the Color You can define the color of an icon using the CSS. The following example example shows how to change the color of the tree icon. Live Demo <html> <head> <link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”><style> i.mysize {font-size: 6em; color: blue;} </style> </head> <body> </body> </html> It will produce the following output − Print Page Previous Next Advertisements ”;

Aug 10

Material – Editor Icons

Material – Editor Icons ”; Previous Next This chapter explains the usage of Google”s (Material) Editor 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) Editor icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs − Usage Result attach_file attach_file attach_money attach_money border_all border_all border_bottom border_bottom border_clear border_clear border_color border_color border_horizontal border_horizontal border_inner border_inner border_left border_left border_outer border_outer border_right border_right border_style border_style border_top border_top border_vertical border_vertical format_align_center format_align_center format_align_justify format_align_justify format_align_left format_align_left format_align_right format_align_right format_bold format_bold format_clear format_clear format_color_fill format_color_fill format_color_reset format_color_reset format_color_text format_color_text format_indent_decrease format_indent_decrease format_indent_increase format_indent_increase format_italic format_italic format_line_spacing format_line_spacing format_list_bulleted format_list_bulleted format_list_numbered format_list_numbered format_paint format_paint format_quote format_quote format_size format_size format_strikethrough format_strikethrough format_textdirection_l_to_r format_textdirection_l_to_r format_textdirection_r_to_l format_textdirection_r_to_l format_underline format_underline functions functions insert_chart insert_chart insert_comment insert_comment insert_drive_file insert_drive_file insert_emoticon insert_emoticon insert_invitation insert_invitation insert_link insert_link insert_photo insert_photo merge_type merge_type mode_comment mode_comment mode_edit mode_edit money_off money_off publish publish space_bar space_bar strikethrough_s strikethrough_s vertical_align_bottom vertical_align_bottom vertical_align_center vertical_align_center vertical_align_top vertical_align_top wrap_text wrap_text Print Page Previous Next Advertisements ”;

Aug 10

Material – Communication Icons

Material – Communication Icons ”; Previous Next 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> <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) Communication icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs − Usage Result business business call call call_made call_made call_merge call_merge call_missed call_missed call_received call_received call_split call_split chat chat chat_bubble chat_bubble chat_bubble_outline chat_bubble_outline clear_all clear_all comment comment contact_phone contact_phone contacts contacts dialer_sip dialer_sip dialpad dialpad forum forum import_export import_export invert_colors_off invert_colors_off live_help live_help location_off location_off location_on location_on message message no_sim no_sim phone phone phonelink_erase phonelink_erase phonelink_lock phonelink_lock phonelink_ring phonelink_ring phonelink_setup phonelink_setup portable_wifi_off portable_wifi_off present_to_all present_to_all ring_volume ring_volume speaker_phone speaker_phone stay_current_landscape stay_current_landscape stay_current_portrait stay_current_portrait stay_primary_landscape stay_primary_landscape stay_primary_portrait stay_primary_portrait swap_calls swap_calls textsms textsms voicemail voicemail vpn_key vpn_key email email call_end call_end Print Page Previous Next Advertisements ”;