Material - Bildsymbole
In diesem Kapitel wird die Verwendung der Bildsymbole von Google (Material) erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.
<!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>Die folgende Tabelle enthält die Verwendung und die Ergebnisse der Bildsymbole von Google (Material). Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -
| Verwendung | Ergebnis |
|---|---|
| <i class = "material-icons custom"> add_to_photos </ i> | add_to_photos |
| <i class = "material-icons custom"> anpassen </ i> | einstellen |
| <i class = "material-icons custom"> Assistent </ i> | Assistent |
| <i class = "material-icons custom"> Assistent </ i> | Assistent |
| <i class = "material-icons custom"> Audiospur </ i> | Audiospur |
| <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"> Helligkeit_1 </ i> | Helligkeit_1 |
| <i class = "material-icons custom"> Helligkeit_2 </ i> | Helligkeit_2 |
| <i class = "material-icons custom"> Helligkeit_3 </ i> | Helligkeit_3 |
| <i class = "material-icons custom"> Helligkeit_4 </ i> | Helligkeit_4 |
| <i class = "material-icons custom"> Helligkeit_5 </ i> | Helligkeit_5 |
| <i class = "material-icons custom"> Helligkeit_6 </ i> | Helligkeit_6 |
| <i class = "material-icons custom"> Helligkeit_7 </ i> | Helligkeit_7 |
| <i class = "material-icons custom"> kaputtes_bild </ i> | kaputtes_Bild |
| <i class = "material-icons custom"> Pinsel </ i> | Bürste |
| <i class = "material-icons custom"> Kamera </ i> | Kamera |
| <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> | Filmrolle |
| <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"> Sammlungen </ i> | Sammlungen |
| <i class = "material-icons custom"> collection_bookmark </ i> | collection_bookmark |
| <i class = "material-icons custom"> color_lens </ i> | color_lens |
| <i class = "material-icons custom"> kolorieren </ i> | kolorieren |
| <i class = "material-icons custom"> vergleiche </ i> | vergleichen Sie |
| <i class = "material-icons custom"> Kontrollpunkt </ i> | Kontrollpunkt |
| <i class = "material-icons custom"> control_point_duplicate </ i> | control_point_duplicate |
| <i class = "material-icons custom"> Zuschneiden </ i> | Ernte |
| <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"> Details </ i> | Einzelheiten |
| <i class = "material-icons custom"> bearbeiten </ i> | bearbeiten |
| <i class = "material-icons custom"> Belichtung </ i> | Exposition |
| <i class = "material-icons custom"> belichtung_neg_1 </ i> | belichtung_neg_1 |
| <i class = "material-icons custom"> belichtung_plus_1 </ i> | belichtung_plus_1 |
| <i class = "material-icons custom"> belichtung_plus_2 </ i> | belichtung_plus_2 |
| <i class = "material-icons custom"> belichtung_zero </ i> | belichtung_zero |
| <i class = "material-icons custom"> Filter </ i> | Filter |
| <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> | filter_3 |
| <i class = "material-icons custom"> filter_4 </ i> | filter_4 |
| <i class = "material-icons custom"> filter_5 </ i> | filter_5 |
| <i class = "material-icons custom"> filter_6 </ i> | filter_6 |
| <i class = "material-icons custom"> filter_7 </ i> | filter_7 |
| <i class = "material-icons custom"> filter_8 </ i> | filter_8 |
| <i class = "material-icons custom"> filter_9 </ i> | filter_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> | filter_frames |
| <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"> Fackel </ i> | Fackel |
| <i class = "material-icons custom"> flash_auto </ i> | flash_auto |
| <i class = "material-icons custom"> flash_off </ i> | Blitz aus |
| <i class = "material-icons custom"> flash_on </ i> | Blitz an |
| <i class = "material-icons custom"> flip </ i> | Flip |
| <i class = "material-icons custom"> Verlauf </ i> | Gradient |
| <i class = "material-icons custom"> Korn </ i> | Korn |
| <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"> Heilung </ i> | Heilung |
| <i class = "material-icons custom"> image </ i> | Bild |
| <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"> Landschaft </ i> | Landschaft |
| <i class = "material-icons custom"> leak_add </ i> | leck_add |
| <i class = "material-icons custom"> leak_remove </ i> | leck_entfernung |
| <i class = "material-icons custom"> Objektiv </ i> | Linse |
| <i class = "material-icons custom"> sieht </ i> aus | sieht aus |
| <i class = "material-icons custom"> Looks_3 </ i> | Looks_3 |
| <i class = "material-icons custom"> Looks_4 </ i> | Looks_4 |
| <i class = "material-icons custom"> Looks_5 </ i> | sieht aus_5 |
| <i class = "material-icons custom"> Looks_6 </ i> | sieht aus_6 |
| <i class = "material-icons custom"> Looks_one </ i> | Looks_one |
| <i class = "material-icons custom"> Looks_two </ i> | Looks_two |
| <i class = "material-icons custom"> Lupe </ i> | Lupe |
| <i class = "material-icons custom"> monochrome_photos </ i> | monochrome_photos |
| <i class = "material-icons custom"> movie_creation </ i> | movie_creation |
| <i class = "material-icons custom"> music_note </ i> | Musiknote |
| <i class = "material-icons custom"> nature </ i> | Natur |
| <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"> navig_next </ i> | navig_next |
| <i class = "material-icons custom"> navigieren_vor </ i> | navigieren_vorher |
| <i class = "material-icons custom"> Palette </ i> | Palette |
| <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> | Fotoalbum |
| <i class = "material-icons custom"> Fotokamera </ i> | Fotoapparat |
| <i class = "material-icons custom"> Fotobibliothek </ i> | Fotobibliothek |
| <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"> Porträt </ i> | Porträt |
| <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> | Nach links drehen |
| <i class = "material-icons custom"> rotate_right </ i> | drehe nach rechts |
| <i class = "material-icons custom"> Diashow </ i> | Diashow |
| <i class = "material-icons custom"> begradigen </ i> | begradigen |
| <i class = "material-icons custom"> style </ i> | Stil |
| <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"> Textur </ i> | Textur |
| <i class = "material-icons custom"> Zeitraffer </ i> | Zeitraffer |
| <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ät </ i> | Tonalität |
| <i class = "material-icons custom"> transformieren </ i> | verwandeln |
| <i class = "material-icons custom"> tune </ i> | Melodie |
| <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"> Vignette </ i> | Vignette |
| <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 |