Materiale - icone immagine
Questo capitolo spiega l'utilizzo delle icone delle immagini (materiali) di Google. Assumilocustom è il nome della classe CSS in cui abbiamo definito la dimensione e il colore, come mostrato nell'esempio riportato di seguito.
<!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>La tabella seguente contiene l'utilizzo e i risultati delle icone delle immagini (materiali) di Google. Sostituisci il tag <body> del programma precedente con il codice fornito nella tabella per ottenere i rispettivi output -
| Utilizzo | Risultato |
|---|---|
| <i class = "material-icons custom"> add_to_photos </i> | add_to_photos |
| <i class = "material-icons custom"> aggiusta </i> | regolare |
| <i class = "material-icons custom"> assistente </i> | assistente |
| <i class = "material-icons custom"> assistente </i> | assistente |
| <i class = "material-icons custom"> audiotrack </i> | traccia audio |
| <i class = "material-icons custom"> blur_circular </i> | blur_circular |
| <i class = "material-icons custom"> blur_linear </i> | blur_linear |
| <i class = "material-icons custom"> blur_off </i> | blur_off |
| <i class = "material-icons custom"> blur_on </i> | blur_on |
| <i class = "material-icons custom"> luminosità_1 </i> | luminosità_1 |
| <i class = "material-icons custom"> luminosità_2 </i> | luminosità_2 |
| <i class = "material-icons custom"> luminosità_3 </i> | luminosità_3 |
| <i class = "material-icons custom"> luminosità_4 </i> | luminosità_4 |
| <i class = "material-icons custom"> luminosità_5 </i> | luminosità_5 |
| <i class = "material-icons custom"> luminosità_6 </i> | luminosità_6 |
| <i class = "material-icons custom"> luminosità_7 </i> | luminosità_7 |
| <i class = "material-icons custom"> broken_image </i> | immagine_rotta |
| <i class = "material-icons custom"> pennello </i> | spazzola |
| <i class = "material-icons custom"> fotocamera </i> | telecamera |
| <i class = "material-icons custom"> camera_alt </i> | camera_alt |
| <i class = "material-icons custom"> camera_front </i> | camera_front |
| <i class = "material-icons custom"> camera_rear </i> | camera_rear |
| <i class = "material-icons custom"> camera_roll </i> | rullino fotografico |
| <i class = "material-icons custom"> center_focus_strong </i> | center_focus_strong |
| <i class = "material-icons custom"> center_focus_weak </i> | center_focus_weak |
| <i class = "material-icons custom"> raccolte </i> | collezioni |
| <i class = "material-icons custom"> collections_bookmark </i> | collections_bookmark |
| <i class = "material-icons custom"> color_lens </i> | color_lens |
| <i class = "material-icons custom"> colorize </i> | colorare |
| <i class = "material-icons custom"> confronta </i> | confrontare |
| <i class = "material-icons custom"> control_point </i> | punto di controllo |
| <i class = "material-icons custom"> control_point_duplicate </i> | control_point_duplicate |
| <i class = "material-icons custom"> crop </i> | Ritaglia |
| <i class = "material-icons custom"> crop_16_9 </i> | crop_16_9 |
| <i class = "material-icons custom"> crop_3_2 </i> | crop_3_2 |
| <i class = "material-icons custom"> crop_5_4 </i> | crop_5_4 |
| <i class = "material-icons custom"> crop_7_5 </i> | crop_7_5 |
| <i class = "material-icons custom"> crop_din </i> | crop_din |
| <i class = "material-icons custom"> crop_free </i> | crop_free |
| <i class = "material-icons custom"> crop_landscape </i> | crop_landscape |
| <i class = "material-icons custom"> crop_original </i> | crop_original |
| <i class = "material-icons custom"> crop_portrait </i> | crop_portrait |
| <i class = "material-icons custom"> crop_square </i> | crop_square |
| <i class = "material-icons custom"> dehaze </i> | dehaze |
| <i class = "material-icons custom"> dettagli </i> | dettagli |
| <i class = "material-icons custom"> modifica </i> | modificare |
| <i class = "material-icons custom"> esposizione </i> | esposizione |
| <i class = "material-icons custom"> exhibition_neg_1 </i> | esposizione_neg_1 |
| <i class = "material-icons custom"> explore_plus_1 </i> | esposizione_plus_1 |
| <i class = "material-icons custom"> explore_plus_2 </i> | esposizione_plus_2 |
| <i class = "material-icons custom"> explore_zero </i> | esposizione_zero |
| <i class = "material-icons custom"> filtro </i> | filtro |
| <i class = "material-icons custom"> filter_1 </i> | filter_1 |
| <i class = "material-icons custom"> filter_2 </i> | filter_2 |
| <i class = "material-icons custom"> filter_3 </i> | filtro_3 |
| <i class = "material-icons custom"> filter_4 </i> | filtro_4 |
| <i class = "material-icons custom"> filter_5 </i> | filtro_5 |
| <i class = "material-icons custom"> filter_6 </i> | filtro_6 |
| <i class = "material-icons custom"> filter_7 </i> | filtro_7 |
| <i class = "material-icons custom"> filter_8 </i> | filter_8 |
| <i class = "material-icons custom"> filter_9 </i> | filtro_9 |
| <i class = "material-icons custom"> filter_9_plus </i> | filter_9_plus |
| <i class = "material-icons custom"> filter_b_and_w </i> | filter_b_and_w |
| <i class = "material-icons custom"> filter_center_focus </i> | filter_center_focus |
| <i class = "material-icons custom"> filter_drama </i> | filter_drama |
| <i class = "material-icons custom"> filter_frames </i> | frame_filter |
| <i class = "material-icons custom"> filter_hdr </i> | filter_hdr |
| <i class = "material-icons custom"> filter_none </i> | filter_none |
| <i class = "material-icons custom"> filter_tilt_shift </i> | filter_tilt_shift |
| <i class = "material-icons custom"> filter_vintage </i> | filter_vintage |
| <i class = "material-icons custom"> flare </i> | bagliore |
| <i class = "material-icons custom"> flash_auto </i> | flash_auto |
| <i class = "material-icons custom"> flash_off </i> | flash_off |
| <i class = "material-icons custom"> flash_on </i> | flash_on |
| <i class = "material-icons custom"> capovolgi </i> | Flip |
| <i class = "material-icons custom"> gradiente </i> | pendenza |
| <i class = "material-icons custom"> grana </i> | grano |
| <i class = "material-icons custom"> grid_off </i> | grid_off |
| <i class = "material-icons custom"> grid_on </i> | grid_on |
| <i class = "material-icons custom"> hdr_off </i> | hdr_off |
| <i class = "material-icons custom"> hdr_on </i> | hdr_on |
| <i class = "material-icons custom"> hdr_strong </i> | hdr_strong |
| <i class = "material-icons custom"> hdr_weak </i> | hdr_weak |
| <i class = "material-icons custom"> guarigione </i> | guarigione |
| <i class = "material-icons custom"> immagine </i> | Immagine |
| <i class = "material-icons custom"> image_aspect_ratio </i> | image_aspect_ratio |
| <i class = "material-icons custom"> iso </i> | iso |
| <i class = "material-icons custom"> landscape </i> | paesaggio |
| <i class = "material-icons custom"> leak_add </i> | leak_add |
| <i class = "material-icons custom"> leak_remove </i> | leak_remove |
| <i class = "material-icons custom"> lente </i> | lente |
| <i class = "material-icons custom"> sembra </i> | sembra |
| <i class = "material-icons custom"> looks_3 </i> | sembra_3 |
| <i class = "material-icons custom"> looks_4 </i> | sembra_4 |
| <i class = "material-icons custom"> looks_5 </i> | sembra_5 |
| <i class = "material-icons custom"> looks_6 </i> | sembra_6 |
| <i class = "material-icons custom"> looks_one </i> | sembra_uno |
| <i class = "material-icons custom"> looks_two </i> | looks_two |
| <i class = "material-icons custom"> lente </i> | lente di ingrandimento |
| <i class = "material-icons custom"> foto_ monocromatiche </i> | monocromatico_photos |
| <i class = "material-icons custom"> movie_creation </i> | movie_creation |
| <i class = "material-icons custom"> music_note </i> | nota musicale |
| <i class = "material-icons custom"> natura </i> | natura |
| <i class = "material-icons custom"> nature_people </i> | nature_people |
| <i class = "material-icons custom"> wb_sunny </i> | wb_sunny |
| <i class = "material-icons custom"> navigate_next </i> | navigate_next |
| <i class = "material-icons custom"> navigate_before </i> | navigate_before |
| <i class = "material-icons custom"> tavolozza </i> | tavolozza |
| <i class = "material-icons custom"> panorama </i> | panorama |
| <i class = "material-icons custom"> panorama_fish_eye </i> | panorama_fish_eye |
| <i class = "material-icons custom"> panorama_horizontal </i> | panorama_horizontal |
| <i class = "material-icons custom"> panorama_vertical </i> | panorama_vertical |
| <i class = "material-icons custom"> panorama_wide_angle </i> | panorama_wide_angle |
| <i class = "material-icons custom"> foto </i> | foto |
| <i class = "material-icons custom"> photo_album </i> | album di foto |
| <i class = "material-icons custom"> photo_camera </i> | fotocamera |
| <i class = "material-icons custom"> libreria_foto </i> | photo_library |
| <i class = "material-icons custom"> photo_size_select_actual </i> | photo_size_select_actual |
| <i class = "material-icons custom"> photo_size_select_large </i> | photo_size_select_large |
| <i class = "material-icons custom"> photo_size_select_small </i> | photo_size_select_small |
| <i class = "material-icons custom"> picture_as_pdf </i> | picture_as_pdf |
| <i class = "material-icons custom"> ritratto </i> | ritratto |
| <i class = "material-icons custom"> remove_red_eye </i> | remove_red_eye |
| <i class = "material-icons custom"> rotate_90_degrees_ccw </i> | rotate_90_degrees_ccw |
| <i class = "material-icons custom"> rotate_left </i> | gira a sinistra |
| <i class = "material-icons custom"> rotate_right </i> | ruota a destra |
| <i class = "material-icons custom"> slideshow </i> | Presentazione |
| <i class = "material-icons custom"> raddrizza </i> | raddrizzare |
| <i class = "material-icons custom"> stile </i> | stile |
| <i class = "material-icons custom"> switch_camera </i> | switch_camera |
| <i class = "material-icons custom"> switch_video </i> | switch_video |
| <i class = "material-icons custom"> tag_faces </i> | tag_faces |
| <i class = "material-icons custom"> texture </i> | struttura |
| <i class = "material-icons custom"> timelapse </i> | lasso di tempo |
| <i class = "material-icons custom"> timer </i> | Timer |
| <i class = "material-icons custom"> timer_10 </i> | timer_10 |
| <i class = "material-icons custom"> timer_3 </i> | timer_3 |
| <i class = "material-icons custom"> timer_off </i> | timer_off |
| <i class = "material-icons custom"> tonalità </i> | tonalità |
| <i class = "material-icons custom"> trasformare </i> | trasformare |
| <i class = "material-icons custom"> sintonizza </i> | sintonizzare |
| <i class = "material-icons custom"> view_comfy </i> | view_comfy |
| <i class = "material-icons custom"> view_compact </i> | view_compact |
| <i class = "material-icons custom"> vignetta </i> | vignetta |
| <i class = "material-icons custom"> wb_auto </i> | wb_auto |
| <i class = "material-icons custom"> wb_cloudy </i> | wb_cloudy |
| <i class = "material-icons custom"> wb_incandescent </i> | wb_incandescent |
| <i class = "material-icons custom"> wb_iridescent </i> | wb_iridescent |