Web-icons-material-notification-icons
提供:Dev Guides
素材-通知アイコン
この章では、Googleの(素材)通知アイコンの使用方法について説明します。 以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。
<!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>
次の表には、Googleの(素材)通知アイコンの使用法と結果が含まれています。 上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-
Usage | Result |
---|---|
<i class="material-icons custom">adb</i> | adb |
<i class="material-icons custom">airline_seat_flat</i> | airline_seat_flat |
<i class="material-icons custom">airline_seat_flat_angled</i> | airline_seat_flat_angled |
<i class="material-icons custom">airline_seat_individual_suite</i> | airline_seat_individual_suite |
<i class="material-icons custom">airline_seat_legroom_reduced</i> | airline_seat_legroom_reduced |
<i class="material-icons custom">airline_seat_recline_extra</i> | airline_seat_recline_extra |
<i class="material-icons custom">airline_seat_recline_normal</i> | airline_seat_recline_normal |
<i class="material-icons custom">bluetooth_audio</i> | bluetooth_audio |
<i class="material-icons custom">confirmation_number</i> | confirmation_number |
<i class="material-icons custom">disc_full</i> | disc_full |
<i class="material-icons custom">do_not_disturb</i> | do_not_disturb |
<i class="material-icons custom">do_not_disturb_alt</i> | do_not_disturb_alt |
<i class="material-icons custom">drive_eta</i> | drive_eta |
<i class="material-icons custom">event_available</i> | event_available |
<i class="material-icons custom">event_busy</i> | event_busy |
<i class="material-icons custom">event_note</i> | event_note |
<i class="material-icons custom">folder_special</i> | folder_special |
<i class="material-icons custom">live_tv</i> | live_tv |
<i class="material-icons custom">mms</i> | mms |
<i class="material-icons custom">more</i> | more |
<i class="material-icons custom">network_locked</i> | network_locked |
<i class="material-icons custom">ondemand_video</i> | ondemand_video |
<i class="material-icons custom">personal_video</i> | personal_video |
<i class="material-icons custom">phone_bluetooth_speaker</i> | phone_bluetooth_speaker |
<i class="material-icons custom">phone_forwarded</i> | phone_forwarded |
<i class="material-icons custom">phone_in_talk</i> | phone_in_talk |
<i class="material-icons custom">phone_locked</i> | phone_locked |
<i class="material-icons custom">phone_missed</i> | phone_missed |
<i class="material-icons custom">phone_paused</i> | phone_paused |
<i class="material-icons custom">power</i> | power |
<i class="material-icons custom">sd_card</i> | sd_card |
<i class="material-icons custom">sim_card_alert</i> | sim_card_alert |
<i class="material-icons custom">sms</i> | sms |
<i class="material-icons custom">sms_failed</i> | sms_failed |
<i class="material-icons custom">sync</i> | sync |
<i class="material-icons custom">sync_disabled</i> | sync_disabled |
<i class="material-icons custom">sync_problem</i> | sync_problem |
<i class="material-icons custom">system_update</i> | system_update |
<i class="material-icons custom">tap_and_play</i> | tap_and_play |
<i class="material-icons custom">time_to_leave</i> | time_to_leave |
<i class="material-icons custom">vibration</i> | vibration |
<i class="material-icons custom">voice_chat</i> | voice_chat |
<i class="material-icons custom">vpn_lock</i> | vpn_lock |
<i class="material-icons custom">wc</i> | wc |
<i class="material-icons custom">wifi</i> | wifi |