วัสดุ - ไอคอนการสื่อสาร
บทนี้จะอธิบายการใช้ไอคอนการสื่อสาร (Material) ของ 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>
ตารางต่อไปนี้มีการใช้งานและผลลัพธ์ของไอคอนการสื่อสาร (Material) ของ Google แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -
การใช้งาน | ผลลัพธ์ |
---|---|
<i class = "material-icons custom"> ธุรกิจ </i> | ธุรกิจ |
<i class = "material-icons custom"> โทร </i> | โทร |
<i class = "material-icons custom"> call_made </i> | call_made |
<i class = "material-icons custom"> call_merge </i> | call_merge |
<i class = "material-icons custom"> call_missed </i> | call_missed |
<i class = "material-icons custom"> call_received </i> | call_received |
<i class = "material-icons custom"> call_split </i> | call_split |
<i class = "material-icons custom"> แชท </i> | แชท |
<i class = "material-icons custom"> chat_bubble </i> | chat_bubble |
<i class = "material-icons custom"> chat_bubble_outline </i> | chat_bubble_outline |
<i class = "material-icons custom"> clear_all </i> | ลบทั้งหมด |
<i class = "material-icons custom"> ความคิดเห็น </i> | แสดงความคิดเห็น |
<i class = "material-icons custom"> contact_phone </i> | contact_phone |
<i class = "material-icons custom"> ผู้ติดต่อ </i> | ผู้ติดต่อ |
<i class = "material-icons custom"> dialer_sip </i> | dialer_sip |
<i class = "material-icons custom"> แป้นหมายเลข </i> | แป้นหมายเลข |
<i class = "material-icons custom"> ฟอรัม </i> | ฟอรัม |
<i class = "material-icons custom"> import_export </i> | นำเข้าส่งออก |
<i class = "material-icons custom"> invert_colors_off </i> | invert_colors_off |
<i class = "material-icons custom"> live_help </i> | live_help |
<i class = "material-icons custom"> location_off </i> | location_off |
<i class = "material-icons custom"> location_on </i> | location_on |
<i class = "material-icons custom"> ข้อความ </i> | ข้อความ |
<i class = "material-icons custom"> no_sim </i> | no_sim |
<i class = "material-icons custom"> โทรศัพท์ </i> | โทรศัพท์ |
<i class = "material-icons custom"> phonelink_erase </i> | phonelink_erase |
<i class = "material-icons custom"> phonelink_lock </i> | phonelink_lock |
<i class = "material-icons custom"> phonelink_ring </i> | phonelink_ring |
<i class = "material-icons custom"> phonelink_setup </i> | phonelink_setup |
<i class = "material-icons custom"> portable_wifi_off </i> | portable_wifi_off |
<i class = "material-icons custom"> present_to_all </i> | present_to_all |
<i class = "material-icons custom"> ring_volume </i> | ring_volume |
<i class = "material-icons custom"> speaker_phone </i> | speaker_phone |
<i class = "material-icons custom"> stay_current_landscape </i> | stay_current_landscape |
<i class = "material-icons custom"> stay_current_portrait </i> | stay_current_portrait |
<i class = "material-icons custom"> stay_primary_landscape </i> | stay_primary_landscape |
<i class = "material-icons custom"> stay_primary_portrait </i> | stay_primary_portrait |
<i class = "material-icons custom"> swap_calls </i> | swap_calls |
<i class = "material-icons custom"> ข้อความ </i> | ตำรา |
<i class = "material-icons custom"> วอยซ์เมล </i> | ข้อความเสียง |
<i class = "material-icons custom"> vpn_key </i> | vpn_key |
<i class = "material-icons custom"> อีเมล </i> | อีเมล์ |
<i class = "material-icons custom"> call_end </i> | call_end |