ไอคอนเว็บ - คู่มือฉบับย่อ

ไอคอนคือสัญลักษณ์ที่ใช้เพื่อแสดงถึงการดำเนินการเฉพาะหรือความสามารถบนเว็บเพจ ไอคอนใช้ในเอกสารและแอพพลิเคชั่นและสามารถเลือกได้หรือไม่สามารถเลือกได้ ตัวอย่างเช่นรูปภาพที่เราเห็นบนปุ่มของแอปพลิเคชันเป็นไอคอนทั้งหมดและปุ่มเหล่านี้สามารถเลือกได้ ในทำนองเดียวกันเมื่อเราใช้ไอคอนเป็นโลโก้ของ บริษัท โดยปกติจะไม่สามารถเลือกได้

ในสภาพแวดล้อม Windows ถ้าเราปิดเสียงระบบจะแสดงด้วยความช่วยเหลือของไอคอนดังที่แสดงด้านล่าง

การใช้ไอคอนเว็บเราสามารถแสดงหน้าโหลดตัวเลือกที่ปิดใช้งานลิงก์การเปลี่ยนเส้นทาง ฯลฯ ไอคอนเหล่านี้สามารถพลิกหมุนปรับขนาดล้อมรอบกลับด้านและทำสีได้

แบบอักษรของไอคอน

แบบอักษรไอคอนประกอบด้วยสัญลักษณ์และร่ายมนตร์ เมื่อคุณโหลดแบบอักษรที่ต้องการแล้วคุณสามารถใช้ไอคอนใด ๆ ที่มีให้โดยฟอนต์นั้นโดยใช้ชื่อคลาสของไอคอน นอกจากนี้เรายังสามารถใช้สีต่างๆกับไอคอนและปรับขนาดได้โดยใช้คุณสมบัติ CSS มีไลบรารีไอคอน (แบบอักษร) มากมายที่ให้ไอคอน บทช่วยสอนนี้มุ่งเน้นไปที่แบบอักษรหลักสามแบบ ได้แก่ -

แบบอักษรน่ากลัว
Bootstrap Glyphicons
ไอคอนวัสดุของ Google

แบบอักษรน่ากลัว

แบบอักษรนี้มีไอคอนเวกเตอร์ที่ปรับขนาดได้ฟรี 519 ไอคอน ห้องสมุดนี้ให้บริการฟรีทั้งสำหรับการใช้งานส่วนตัวและเชิงพาณิชย์ ไอคอนเหล่านี้สามารถปรับแต่งได้อย่างง่ายดาย เดิมพวกเขาได้รับการพัฒนาสำหรับ Bootstrap

Bootstrap Glyphicons

นี่คือไลบรารีของไอคอนสีเดียวที่มีอยู่ในรูปแบบภาพแรสเตอร์รูปแบบภาพเวกเตอร์และแบบอักษร มีร่ายมนตร์มากกว่า 250 แบบในรูปแบบอักษร คุณสามารถใช้แบบอักษรเหล่านี้ในโครงการเว็บของคุณ ไอคอนเหล่านี้ไม่ฟรี แต่คุณสามารถใช้ในโครงการที่ใช้ Bootstrap ได้โดยไม่ต้องซื้อ

ไอคอนวัสดุของ Google

Google มีไอคอนประมาณ 750 ไอคอนที่ออกแบบภายใต้ "หลักเกณฑ์การออกแบบวัสดุ" และสิ่งเหล่านี้เรียกว่า Material Designไอคอน ไอคอนเหล่านี้เรียบง่ายและรองรับเว็บเบราว์เซอร์สมัยใหม่ทั้งหมด เนื่องจากไอคอนเหล่านี้เป็นแบบเวกเตอร์จึงสามารถปรับขนาดได้เช่นกัน ในการใช้ไอคอนเหล่านี้เราต้องโหลดฟอนต์ (ไลบรารี)material-icons.

ไลบรารีไอคอน Font Awesome ให้ 519 ไอคอนเวกเตอร์ที่ปรับขนาดได้ฟรี ห้องสมุดนี้ฟรีสำหรับการใช้งานส่วนตัวและเชิงพาณิชย์ เดิมออกแบบมาสำหรับ Bootstrap ไอคอนเหล่านี้สามารถปรับแต่งได้อย่างง่ายดาย

กำลังโหลด Font Library

ในการโหลดไลบรารี Font Awesome ให้คัดลอกและวางบรรทัดต่อไปนี้ในส่วน <head> ของเว็บเพจ

<head>
   <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

การใช้ไอคอน

Font Awesome มีไอคอนมากมาย เลือกหนึ่งในนั้นและเพิ่มชื่อของคลาสไอคอนให้กับองค์ประกอบ HTML ใด ๆ ภายในแท็ก <body> ในตัวอย่างต่อไปนี้เราได้ใช้ไอคอนของสกุลเงินอินเดีย

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

มันจะสร้างผลลัพธ์ต่อไปนี้ -

การกำหนดขนาด

คุณสามารถเพิ่มหรือลดขนาดของไอคอนได้โดยกำหนดขนาดโดยใช้ CSS และใช้ร่วมกับชื่อคลาสดังที่แสดงด้านล่าง ในตัวอย่างที่กำหนดเราได้ประกาศขนาดเป็น 6 em

<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>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

มันจะสร้างผลลัพธ์ต่อไปนี้ -

การกำหนดสี

เช่นเดียวกับขนาดคุณสามารถกำหนดสีของไอคอนโดยใช้ CSS ตัวอย่างต่อไปนี้แสดงวิธีเปลี่ยนสีของไอคอนสกุลเงินของอินเดีย

<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>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

รายการหมวดหมู่

Font Awesome มี 519 ไอคอนในหมวดหมู่ต่อไปนี้ -

ไอคอนโปรแกรมประยุกต์บนเว็บ
ไอคอนมือ
ไอคอนการขนส่ง
ไอคอนเพศ
ไอคอนประเภทไฟล์
ไอคอนสปินเนอร์
ไอคอนควบคุมฟอร์ม
ไอคอนการชำระเงิน
ไอคอนแผนภูมิ
ไอคอนสกุลเงิน
ไอคอนแก้ไขข้อความ
ไอคอนทิศทาง
ไอคอนเครื่องเล่นวิดีโอ
ไอคอนแบรนด์

ในการใช้ไอคอนเหล่านี้คุณต้องแทนที่ชื่อคลาสในโปรแกรมที่กำหนดในบทนี้ด้วยชื่อคลาสของไอคอนที่ต้องการ ในบทต่อ ๆ ไปของหน่วยนี้ (Font Awesome) เราได้อธิบายการใช้งานหมวดหมู่อย่างชาญฉลาดและผลลัพธ์ของไอคอน Font Awesome ต่างๆ

บทนี้อธิบายการใช้งานไอคอน Font Awesome Web Application สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<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>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน Font Awesome Web Application แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "fa fa-adjustment custom"> </i>
<i class = "fa fa-anchor custom"> </i>
<i class = "fa fa-archive custom"> </i>
<i class = "fa fa-area-chart custom"> </i>
<i class = "fa fa-arrows custom"> </i>
<i class = "fa fa-arrows-h กำหนดเอง"> </i>
<i class = "fa fa-arrows-v กำหนดเอง"> </i>
<i class = "fa fa-asterisk custom"> </i>
<i class = "fa fa-at custom"> </i>
<i class = "fa fa-car custom"> </i>
<i class = "fa fa-balance-scale custom"> </i>
<i class = "fa fa-ban custom"> </i>
<i class = "fa fa-bank custom"> </i>
<i class = "fa fa-bar-chart custom"> </i>
<i class = "fa fa-bar-chart-o กำหนดเอง"> </i>
<i class = "fa fa-barcode custom"> </i>
<i class = "fa fa-bars custom"> </i>
<i class = "fa fa-bed custom"> </i>
<i class = "fa fa-beer custom"> </i>
<i class = "fa fa-bell custom"> </i>
<i class = "fa fa-wrench custom"> </i>
<i class = "fa fa-bell-o custom"> </i>
<i class = "fa fa-bell-slash custom"> </i>
<i class = "fa fa-bell-slash-o กำหนดเอง"> </i>
<i class = "fa fa-bicycle custom"> </i>
<i class = "fa fa-battery-0 custom"> </i>
<i class = "fa fa-battery-1 custom"> </i>
<i class = "fa fa-battery-2 custom"> </i>
<i class = "fa fa-battery-3 custom"> </i>
<i class = "fa fa-battery-4 custom"> </i>
<i class = "fa fa-battery-empty custom"> </i>
<i class = "fa fa-battery-quarter custom"> </i>
<i class = "fa fa-battery-half custom"> </i>
<i class = "fa fa-battery-three-quarters custom"> </i>
<i class = "fa fa-battery-full custom"> </i>
<i class = "fa fa-birthday-cake custom"> </i>
<i class = "fa fa-bolt custom"> </i>
<i class = "fa fa-bomb custom"> </i>
<i class = "fa fa-book custom"> </i>
<i class = "fa fa-bookmark custom"> </i>
<i class = "fa fa-bookmark-o กำหนดเอง"> </i>
<i class = "fa fa-briefcase custom"> </i>
<i class = "fa fa-bug custom"> </i>
<i class = "fa fa-building custom"> </i>
<i class = "fa fa-building-o custom"> </i>
<i class = "fa fa-bullhorn custom"> </i>
<i class = "fa fa-bullseye custom"> </i>
<i class = "fa fa-bus custom"> </i>
<i class = "fa fa-cab custom"> </i>
<i class = "fa fa-video-camera custom"> </i>
<i class = "fa fa-calendar custom"> </i>
<i class = "fa fa-calendar-check-o กำหนดเอง"> </i>
<i class = "fa fa-calendar-minus-o กำหนดเอง"> </i>
<i class = "fa fa-calendar-o กำหนดเอง"> </i>
<i class = "fa fa-calendar-plus-o กำหนดเอง"> </i>
<i class = "fa fa-calendar-times-o กำหนดเอง"> </i>
<i class = "fa fa-camera custom"> </i>
<i class = "fa fa-camera-retro custom"> </i>
<i class = "fa fa-car custom"> </i>
<i class = "fa fa-cc กำหนดเอง"> </i>
<i class = "fa-caret-square-o-down custom"> </i>
<i class = "fa-caret-square-o-left กำหนดเอง"> </i>
<i class = "fa-caret-square-o-right กำหนดเอง"> </i>
<i class = "fa-caret-square-o-up กำหนดเอง"> </i>
<i class = "fa-cart-arrow-down custom"> </i>
<i class = "fa fa-cart-plus custom"> </i>
<i class = "fa fa-certificate custom"> </i>
<i class = "fa fa-child custom"> </i>
<i class = "fa fa-check custom"> </i>
<i class = "fa fa-check-circle custom"> </i>
<i class = "fa-check-circle-o custom"> </i>
<i class = "fa fa-check-square custom"> </i>
<i class = "fa fa-check-square-o custom"> </i>
<i class = "fa fa-circle custom"> </i>
<i class = "fa fa-circle-o custom"> </i>
<i class = "fa fa-circle-o-notch กำหนดเอง"> </i>
<i class = "fa fa-circle-thin กำหนดเอง"> </i>
<i class = "fa fa-clock-o custom"> </i>
<i class = "fa fa-clone custom"> </i>
<i class = "fa fa-close custom"> </i>
<i class = "fa fa-anchor custom"> </i>
<i class = "fa fa-cloud-download custom"> </i>
<i class = "fa fa-cloud-upload custom"> </i>
<i class = "fa fa-code custom"> </i>
<i class = "fa fa-code-fork custom"> </i>
<i class = "fa fa-coffee custom"> </i>
<i class = "fa fa-cog custom"> </i>
<i class = "fa fa-cogs custom"> </i>
<i class = "fa fa-comment custom"> </i>
<i class = "fa fa-comment-o custom"> </i>
<i class = "fa fa-commenting custom"> </i>
<i class = "fa fa-commenting-o custom"> </i>
<i class = "fa fa-comments custom"> </i>
<i class = "fa fa-comments-o custom"> </i>
<i class = "fa fa-compass custom"> </i>
<i class = "fa fa-copyright custom"> </i>
<i class = "fa fa-creative-commons custom"> </i>
<i class = "fa fa-credit-card custom"> </i>
<i class = "fa fa-crop custom"> </i>
<i class = "fa fa-crosshairs custom"> </i>
<i class = "fa fa-cube custom"> </i>
<i class = "fa fa-ก้อนกำหนดเอง"> </i>
<i class = "fa fa-cutlery custom"> </i>
<i class = "fa fa-dashboard custom"> </i>
<i class = "fa fa-database custom"> </i>
<i class = "fa fa-desktop custom"> </i>
<i class = "fa fa-diamond custom"> </i>
<i class = "fa fa-dot-circle-o กำหนดเอง"> </i>
<i class = "fa fa-download custom"> </i>
<i class = "fa fa-edit custom"> </i>
<i class = "fa fa-ellipsis-h กำหนดเอง"> </i>
<i class = "fa fa-ellipsis-v กำหนดเอง"> </i>
<i class = "fa fa-ซองกำหนดเอง"> </i>
<i class = "fa fa-ซอง -o กำหนดเอง"> </i>
<i class = "fa fa-ซองจดหมายแบบกำหนดเอง"> </i>
<i class = "fa fa-eraser custom"> </i>
<i class = "fa fa-exchange custom"> </i>
<i class = "fa fa-exclamation custom"> </i>
<i class = "fa fa-exclamation-circle custom"> </i>
<i class = "fa fa-exclamation-triangle กำหนดเอง"> </i>
<i class = "fa fa-external-link custom"> </i>
<i class = "fa fa-external-link-square custom"> </i>
<i class = "fa fa-eye custom"> </i>
<i class = "fa fa-eye-slash custom"> </i>
<i class = "fa fa-eyedropper custom"> </i>
<i class = "fa fa-fax custom"> </i>
<i class = "fa fa-feed custom"> </i>
<i class = "fa fa-female custom"> </i>
<i class = "fa fa-fighter-jet custom"> </i>
<i class = "fa fa-file-archive-o กำหนดเอง"> </i>
<i class = "fa fa-file-audio-o กำหนดเอง"> </i>
<i class = "fa fa-file-code-o custom"> </i>
<i class = "fa fa-file-excel-o custom"> </i>
<i class = "fa fa-volume-down custom"> </i>
<i class = "fa fa-file-movie-o กำหนดเอง"> </i>
<i class = "fa fa-file-pdf-o กำหนดเอง"> </i>
<i class = "fa fa-file-photo-o กำหนดเอง"> </i>
<i class = "fa fa-file-picture-o กำหนดเอง"> </i>
<i class = "fa fa-file-powerpoint-o กำหนดเอง"> </i>
<i class = "fa fa-file-sound-o กำหนดเอง"> </i>
<i class = "fa fa-file-video-o custom"> </i>
<i class = "fa fa-file-word-o custom"> </i>
<i class = "fa fa-file-sound-o กำหนดเอง"> </i>
<i class = "fa fa-file-video-o custom"> </i>
<i class = "fa fa-file-word-o custom"> </i>
<i class = "fa fa-file-zip-o กำหนดเอง"> </i>
<i class = "fa fa-film custom"> </i>
<i class = "fa fa-filter custom"> </i>
<i class = "fa fa-fire custom"> </i>
<i class = "fa fa-fire-rescue custom"> </i>
<i class = "fa fa-flag custom"> </i>
<i class = "fa fa-flag-checkered custom"> </i>
<i class = "fa fa-flag-o กำหนดเอง"> </i>
<i class = "fa fa-flash custom"> </i>
<i class = "fa fa-flask custom"> </i>
<i class = "fa fa-flask custom"> </i>
<i class = "fa fa-folder custom"> </i>
<i class = "fa fa-folder-o custom"> </i>
<i class = "fa fa-folder-open custom"> </i>
<i class = "fa fa-folder-open-o custom"> </i>
<i class = "fa fa-frown-o custom"> </i>
<i class = "fa fa-volume-off custom"> </i>
<i class = "fa fa-gamepad custom"> </i>
<i class = "fa fa-gavel custom"> </i>
<i class = "fa fa-gear custom"> </i>
<i class = "fa fa-Gear custom"> </i>
<i class = "fa fa-gift custom"> </i>
<i class = "fa fa-glass custom"> </i>
<i class = "fa fa-global custom"> </i>
<i class = "fa fa-Graduation-cap custom"> </i>
<i class = "fa fa-group custom"> </i>
<i class = "fa fa-hand-grab-o custom"> </i>
<i class = "fa fa-hand-lizard-o custom"> </i>
<i class = "fa fa-hand-paper-o custom"> </i>
<i class = "fa fa-hand-peace-o custom"> </i>
<i class = "fa fa-hand-pointer-o กำหนดเอง"> </i>
<i class = "fa fa-hand-rock-o custom"> </i>
<i class = "fa fa-hand -issors-o custom"> </i>
<i class = "fa fa-hand-spock-o กำหนดเอง"> </i>
<i class = "fa fa-hand-paper-o custom"> </i>
<i class = "fa fa-hdd-o กำหนดเอง"> </i>
<i class = "fa fa-headphones custom"> </i>
<i class = "fa fa-heart custom"> </i>
<i class = "fa fa-heart-o custom"> </i>
<i class = "fa fa-heartbeat custom"> </i>
<i class = "fa fa-history custom"> </i>
<i class = "fa fa-home custom"> </i>
<i class = "fa fa-hotel custom"> </i>
<i class = "fa fa-hourglass custom"> </i>
<i class = "fa fa-hourglass-start custom"> </i>
<i class = "fa-hourglass-half custom"> </i>
<i class = "fa-hourglass-end custom"> </i>
<i class = "fa fa-i-cursor custom"> </i>
<i class = "fa fa-image custom"> </i>
<i class = "fa fa-inbox custom"> </i>
<i class = "fa fa-industry custom"> </i>
<i class = "fa fa-info custom"> </i>
<i class = "fa fa-info-circle custom"> </i>
<i class = "fa fa-institustom"> </i>
<i class = "fa fa-key custom"> </i>
<i class = "fa fa-keyboard-o custom"> </i>
<i class = "fa fa-language custom"> </i>
<i class = "fa fa-laptop custom"> </i>
<i class = "fa fa-leaf custom"> </i>
<i class = "fa fa-legal custom"> </i>
<i class = "fa fa-lemon-o custom"> </i>
<i class = "fa fa-level-down custom"> </i>
<i class = "fa fa-level-up custom"> </i>
<i class = "fa fa-life-bouy custom"> </i>
<i class = "fa fa-life-ring custom"> </i>
<i class = "fa fa-life-saver custom"> </i>
<i class = "fa fa-lightbulb-o custom"> </i>
<i class = "fa fa-line-chart custom"> </i>
<i class = "fa fa-location-arrow custom"> </i>
<i class = "fa fa-lock custom"> </i>
<i class = "fa fa-magic custom"> </i>
<i class = "fa fa-magnet custom"> </i>
<i class = "fa fa-mail-forward custom"> </i>
<i class = "fa fa-mail-reply custom"> </i>
<i class = "fa fa-mail-reply-all custom"> </i>
<i class = "fa fa-male custom"> </i>
<i class = "fa fa-map custom"> </i>
<i class = "fa fa-map-marker กำหนดเอง"> </i>
<i class = "fa fa-map-o กำหนดเอง"> </i>
<i class = "fa fa-map-pin กำหนดเอง"> </i>
<i class = "fa fa-map-signs custom"> </i>
<i class = "fa fa-meh-o กำหนดเอง"> </i>
<i class = "fa fa-microphone custom"> </i>
<i class = "fa fa-microphone-slash custom"> </i>
<i class = "fa fa-minus custom"> </i>
<i class = "fa fa-minus-circle custom"> </i>
<i class = "fa fa-minus-square custom"> </i>
<i class = "fa fa-minus-square-o กำหนดเอง"> </i>
<i class = "fa fa-mobile custom"> </i>
<i class = "fa fa-money custom"> </i>
<i class = "fa fa-moon-o กำหนดเอง"> </i>
<i class = "fa fa-Mortar-board custom"> </i>
<i class = "fa fa-motorcycle custom"> </i>
<i class = "fa fa-mouse-pointer custom"> </i>
<i class = "fa fa-music custom"> </i>
<i class = "fa fa-users custom"> </i>
<i class = "fa fa-object-group custom"> </i>
<i class = "fa fa-object-ungroup custom"> </i>
<i class = "fa fa-paint-brush custom"> </i>
<i class = "fa fa-paper-plane custom"> </i>
<i class = "fa fa-paper-plane-o กำหนดเอง"> </i>
<i class = "fa fa-paw custom"> </i>
<i class = "fa fa-pencil custom"> </i>
<i class = "fa fa-pencil-square custom"> </i>
<i class = "fa fa-pencil-square-o กำหนดเอง"> </i>
<i class = "fa fa-phone custom"> </i>
<i class = "fa fa-phone custom"> </i>
<i class = "fa fa-photo custom"> </i>
<i class = "fa fa-picture-o กำหนดเอง"> </i>
<i class = "fa fa-pie-chart custom"> </i>
<i class = "fa fa-plane custom"> </i>
<i class = "fa fa-volume-up custom"> </i>
<i class = "fa fa-plus custom"> </i>
<i class = "fa fa-plus-circle custom"> </i>
<i class = "fa fa-plus-square custom"> </i>
<i class = "fa fa-plus-square-o กำหนดเอง"> </i>
<i class = "fa fa-power-off custom"> </i>
<i class = "fa fa-print custom"> </i>
<i class = "fa fa-puzzle-piece custom"> </i>
<i class = "fa fa-qrcode custom"> </i>
<i class = "fa fa-question custom"> </i>
<i class = "fa fa-question-circle custom"> </i>
<i class = "fa fa-quote-left กำหนดเอง"> </i>
<i class = "fa fa-quote-right custom"> </i>
<i class = "fa fa-random custom"> </i>
<i class = "fa fa-recycle custom"> </i>
<i class = "fa fa-refresh custom"> </i>
<i class = "fa-register custom"> </i>
<i class = "fa fa-remove custom"> </i>
<i class = "fa fa-reorder custom"> </i>
<i class = "fa fa-reply custom"> </i>
<i class = "fa fa-reply-all custom"> </i>
<i class = "fa fa-retweet custom"> </i>
<i class = "fa fa-road custom"> </i>
<i class = "fa fa-anchor custom"> </i>
<i class = "fa fa-rss custom"> </i>
<i class = "fa fa-rss-square custom"> </i>
<i class = "fa fa-search custom"> </i>
<i class = "fa fa-search-minus custom"> </i>
<i class = "fa fa-search-plus custom"> </i>
<i class = "fa fa-send custom"> </i>
<i class = "fa fa-send-o custom"> </i>
<i class = "fa fa-server custom"> </i>
<i class = "fa fa-share custom"> </i>
<i class = "fa fa-share-alt custom"> </i>
<i class = "fa fa-share-alt-square กำหนดเอง"> </i>
<i class = "fa fa-share-alt-o กำหนดเอง"> </i>
<i class = "fa fa-shield custom"> </i>
<i class = "fa fa-ship custom"> </i>
<i class = "fa fa-shopping-cart custom"> </i>
<i class = "fa fa-sign-in custom"> </i>
<i class = "fa fa-sign-out custom"> </i>
<i class = "fa fa-signal custom"> </i>
<i class = "fa fa-sitemap custom"> </i>
<i class = "fa fa-sliders custom"> </i>
<i class = "fa fa-smile-o custom"> </i>
<i class = "fa fa-warning custom"> </i>
<i class = "fa fa-sort custom"> </i>
<i class = "fa fa-sort-alpha-asc กำหนดเอง"> </i>
<i class = "fa fa-sort-alpha-desc custom"> </i>
<i class = "fa fa-sort-asc custom"> </i>
<i class = "fa fa-sort-desc custom"> </i>
<i class = "fa fa-sort-down custom"> </i>
<i class = "fa fa-sort-numeric-asc กำหนดเอง"> </i>
<i class = "fa fa-sort-numeric-desc custom"> </i>
<i class = "fa fa-sort-up custom"> </i>
<i class = "fa fa-space-shuttle custom"> </i>
<i class = "fa fa-spinner custom"> </i>
<i class = "fa fa-spoon custom"> </i>
<i class = "fa fa-square custom"> </i>
<i class = "fa fa-square-o กำหนดเอง"> </i>
<i class = "fa fa-star custom"> </i>
<i class = "fa fa-star-half custom"> </i>
<i class = "fa fa-star-half-empty custom"> </i>
<i class = "fa fa-star-half-full custom"> </i>
<i class = "fa fa-star-half-o custom"> </i>
<i class = "fa fa-star-o custom"> </i>
<i class = "fa fa-sticky-note custom"> </i>
<i class = "fa fa-sticky-note-o custom"> </i>
<i class = "fa fa-street-view custom"> </i>
<i class = "fa fa-suitcase custom"> </i>
<i class = "fa fa-sun-o custom"> </i>
<i class = "fa fa-support custom"> </i>
<i class = "fa fa-tablet custom"> </i>
<i class = "fa fa-tachometer custom"> </i>
<i class = "fa fa-tag custom"> </i>
<i class = "fa fa-tags custom"> </i>
<i class = "fa fa-task custom"> </i>
<i class = "fa fa-taxi custom"> </i>
<i class = "fa fa-Television custom"> </i>
<i class = "fa fa-terminal custom"> </i>
<i class = "fa fa-thumb-tack custom"> </i>
<i class = "fa-thumbs-down custom"> </i>
<i class = "fa fa-ticket custom"> </i>
<i class = "fa fa-times custom"> </i>
<i class = "fa fa-times-circle custom"> </i>
<i class = "fa fa-times-circle-o custom"> </i>
<i class = "fa fa-tint custom"> </i>
<i class = "fa fa-toggle-down custom"> </i>
<i class = "fa fa-toggle-left กำหนดเอง"> </i>
<i class = "fa fa-toggle-off custom"> </i>
<i class = "fa fa-toggle-on custom"> </i>
<i class = "fa fa-toggle-right custom"> </i>
<i class = "fa fa-toggle-up custom"> </i>
<i class = "fa fa-copyright custom"> </i>
<i class = "fa fa-tras custom"> </i>
<i class = "fa fa-trash-o custom"> </i>
<i class = "fa fa-tree custom"> </i>
<i class = "fa fa-trophy custom"> </i>
<i class = "fa fa-truck custom"> </i>
<i class = "fa fa-wheelchair custom"> </i>
<i class = "fa fa-tv custom"> </i>
<i class = "fa fa-umbrella กำหนดเอง"> </i>
<i class = "fa fa-university custom"> </i>
<i class = "fa fa-unlock custom"> </i>
<i class = "fa fa-unlock-alt custom"> </i>
<i class = "fa-unsorted custom"> </i>
<i class = "fa fa-upload custom"> </i>
<i class = "fa fa-user custom"> </i>
<i class = "fa fa-user-plus custom"> </i>
<i class = "fa fa-user-secret custom"> </i>
<i class = "fa fa-user-times custom"> </i>

บทนี้จะอธิบายการใช้ไอคอน Font Awesome Hand สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<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>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน Font Awesome Hand แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "fa fa-hand-rock-o custom"> </i>
<i class = "fa fa-hand-o-left กำหนดเอง"> </i>
<i class = "fa fa-hand-paper-o custom"> </i>
<i class = "fa fa-hand-rock-o custom"> </i>
<i class = "fa fa-hand-stop-o custom"> </i>
<i class = "fa-thumbs-o-up กำหนดเอง"> </i>
<i class = "fa fa-hand-lizard-o custom"> </i>
<i class = "fa fa-hand-o-right custom"> </i>
<i class = "fa fa-hand-peace-o custom"> </i>
<i class = "fa fa-hand -issors-o custom"> </i>
<i class = "fa-thumbs-down custom"> </i>
<i class = "fa fa-thumbs-up custom"> </i>
<i class = "fa fa-hand-o-up custom"> </i>
<i class = "fa fa-hand-pointer-o กำหนดเอง"> </i>
<i class = "fa fa-hand-spock-o กำหนดเอง"> </i>
<i class = "fa-thumbs-o-down custom"> </i>

บทนี้จะอธิบายการใช้ไอคอน Font Awesome Transportation สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<html>
   <head>
      <link rel = "stylesheet" href = "http://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>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน Font Awesome Transportation แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "fa fa-ambulance custom"> </i>
<i class = "fa fa-car custom"> </i>
<i class = "fa fa-bicycle custom"> </i>
<i class = "fa fa-bus custom"> </i>
<i class = "fa fa-cab custom"> </i>
<i class = "fa fa-car custom"> </i>
<i class = "fa fa-fighter-jet custom"> </i>
<i class = "fa fa-motorcycle custom"> </i>
<i class = "fa fa-plane custom"> </i>
<i class = "fa fa-rocket custom"> </i>
<i class = "fa fa-ship custom"> </i>
<i class = "fa fa-space-shuttle custom"> </i>
<i class = "fa fa-subway custom"> </i>
<i class = "fa fa-taxi custom"> </i>
<i class = "fa fa-train custom"> </i>
<i class = "fa fa-truck custom"> </i>
<i class = "fa fa-wheelchair custom"> </i>

บทนี้อธิบายการใช้ไอคอน Font Awesome Gender สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<html>
   <head>
      <link rel = "stylesheet" href = "http://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>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน Font Awesome Gender แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "fa fa-genderless custom"> </i>
<i class = "fa fa-intersex custom"> </i>
<i class = "fa fa-mars กำหนดเอง"> </i>
<i class = "fa fa-mars-double custom"> </i>
<i class = "fa fa-mars-stroke กำหนดเอง"> </i>
<i class = "fa fa-mars-stroke-h กำหนดเอง"> </i>
<i class = "fa fa-mars-stroke-v กำหนดเอง"> </i>
<i class = "fa fa-mercury custom"> </i>
<i class = "fa fa-neuter custom"> </i>
<i class = "fa fa-transgender custom"> </i>
<i class = "fa fa-transgender-alt custom"> </i>
<i class = "fa fa-venus custom"> </i>
<i class = "fa fa-venus-double custom"> </i>
<i class = "fa fa-venus-mars กำหนดเอง"> </i>

บทนี้จะอธิบายการใช้งานไอคอน Font Awesome File Type สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<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>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน Font Awesome File Type แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "fa fa-file custom"> </i>
<i class = "fa fa-file-archive-o กำหนดเอง"> </i>
<i class = "fa fa-file-audio-o กำหนดเอง"> </i>
<i class = "fa fa-file-code-o custom"> </i>
<i class = "fa fa-file-excel-o custom"> </i>
<i class = "fa fa-file-image-o กำหนดเอง"> </i>
<i class = "fa fa-file-movie-o กำหนดเอง"> </i>
<i class = "fa fa-file-o กำหนดเอง"> </i>
<i class = "fa fa-file-pdf-o กำหนดเอง"> </i>
<i class = "fa fa-file-photo-o กำหนดเอง"> </i>
<i class = "fa fa-file-picture-o กำหนดเอง"> </i>
<i class = "fa fa-file-powerpoint-o กำหนดเอง"> </i>
<i class = "fa fa-file-video-o custom"> </i>
<i class = "fa fa-file-word-o custom"> </i>
<i class = "fa fa-file-zip-o กำหนดเอง"> </i>
<i class = "fa fa-file-sound-o กำหนดเอง"> </i>
<i class = "fa fa-file-text custom"> </i>
<i class = "fa fa-file-text-o กำหนดเอง"> </i>

บทนี้อธิบายการใช้งานไอคอน Font Awesome Spinner สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<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>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน Font Awesome Spinner แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "fa fa-circle-o-notch กำหนดเอง"> </i>
<i class = "fa fa-cog custom"> </i>
<i class = "fa fa-gear custom"> </i>
<i class = "fa fa-refresh custom"> </i>
<i class = "fa fa-spinner custom"> </i>

บทนี้จะอธิบายการใช้ไอคอน Font Awesome Form Control สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<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>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน Font Awesome Form Control แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "fa fa-check-square custom"> </i>
<i class = "fa fa-check-square-o custom"> </i>
<i class = "fa fa-circle custom"> </i>
<i class = "fa fa-circle-o custom"> </i>
<i class = "fa fa-dot-circle-o กำหนดเอง"> </i>
<i class = "fa fa-minus-square custom"> </i>
<i class = "fa fa-minus-square-o กำหนดเอง"> </i>
<i class = "fa fa-plus-square custom"> </i>
<i class = "fa fa-plus-square-o กำหนดเอง"> </i>
<i class = "fa fa-square custom"> </i>
<i class = "fa fa-square-o กำหนดเอง"> </i>

บทนี้จะอธิบายการใช้ไอคอน Font Awesome Payment สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<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>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน Font Awesome Payment แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "fa fa-cc-amex กำหนดเอง"> </i>
<i class = "fa fa-cc-diners-club custom"> </i>
<i class = "fa fa-cc-Discover custom"> </i>
<i class = "fa fa-cc-jcb กำหนดเอง"> </i>
<i class = "fa fa-cc-mastercard custom"> </i>
<i class = "fa fa-cc-paypal กำหนดเอง"> </i>
<i class = "fa fa-cc-stripe custom"> </i>
<i class = "fa fa-cc-visa custom"> </i>
<i class = "fa fa-credit-card custom"> </i>

บทนี้จะอธิบายการใช้ไอคอน Font Awesome Chart สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<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>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน Font Awesome Chart แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "fa fa-area-chart custom"> </i>
<i class = "fa fa-bar-chart custom"> </i>
<i class = "fa fa-bar-chart-o กำหนดเอง"> </i>
<i class = "fa fa-line-chart custom"> </i>
<i class = "fa fa-pie-chart custom"> </i>

บทนี้จะอธิบายการใช้ไอคอน Font Awesome Currency สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<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>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน Font Awesome Currency แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "fa fa-bitcoin custom"> </i>
<i class = "fa fa-btc custom"> </i>
<i class = "fa fa-cny custom"> </i>
<i class = "fa fa-dollar custom"> </i>
<i class = "fa fa-eur custom"> </i>
<i class = "fa fa-euro custom"> </i>
<i class = "fa fa-gbp custom"> </i>
<i class = "fa fa-gg custom"> </i>
<i class = "fa fa-gg-circle custom"> </i>
<i class = "fa fa-ils custom"> </i>
<i class = "fa fa-inr กำหนดเอง"> </i>
<i class = "fa fa-jpy custom"> </i>
<i class = "fa fa-krw custom"> </i>
<i class = "fa fa-money custom"> </i>
<i class = "fa fa-rmb custom"> </i>
<i class = "fa fa-ruble custom"> </i>
<i class = "fa fa-rub custom"> </i>
<i class = "fa fa-ruble custom"> </i>
<i class = "fa fa-rupee custom"> </i>
<i class = "fa fa-shekel custom"> </i>
<i class = "fa fa-sheqel custom"> </i>
<i class = "fa fa-try custom"> </i>
<i class = "fa fa-turkish-lira custom"> </i>
<i class = "fa fa-usd custom"> </i>
<i class = "fa fa-won custom"> </i>
<i class = "fa fa-yen custom"> </i>

บทนี้จะอธิบายการใช้ไอคอน Font Awesome Text Editor สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<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>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน Font Awesome Text Editor แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "fa fa-align-center custom"> </i>
<i class = "fa fa-align-justify custom"> </i>
<i class = "fa fa-align-left custom"> </i>
<i class = "fa fa-align-right custom"> </i>
<i class = "fa fa-bold custom"> </i>
<i class = "fa fa-chain custom"> </i>
<i class = "fa fa-chain-broken custom"> </i>
<i class = "fa fa-clipboard custom"> </i>
<i class = "fa fa-column custom"> </i>
<i class = "fa fa-copy custom"> </i>
<i class = "fa fa-cut custom"> </i>
<i class = "fa fa-dedent custom"> </i>
<i class = "fa fa-eraser custom"> </i>
<i class = "fa fa-file custom"> </i>
<i class = "fa fa-file-o กำหนดเอง"> </i>
<i class = "fa fa-file-text custom"> </i>
<i class = "fa fa-file-text-o กำหนดเอง"> </i>
<i class = "fa fa-files-o custom"> </i>
<i class = "fa fa-floppy-o custom"> </i>
<i class = "fa fa-font custom"> </i>
<i class = "fa fa-header custom"> </i>
<i class = "fa fa-indent custom"> </i>
<i class = "fa fa-italic custom"> </i>
<i class = "fa fa-link custom"> </i>
<i class = "fa fa-list custom"> </i>
<i class = "fa fa-list-alt custom"> </i>
<i class = "fa fa-list-ol กำหนดเอง"> </i>
<i class = "fa fa-list-ul custom"> </i>
<i class = "fa fa-outdent custom"> </i>
<i class = "fa fa-paperclip custom"> </i>
<i class = "fa fa-วรรคกำหนดเอง"> </i>
<i class = "fa fa-paste custom"> </i>
<i class = "fa fa-repeat custom"> </i>
<i class = "fa fa-rot-left custom"> </i>
<i class = "fa fa-rot-right custom"> </i>
<i class = "fa fa-save custom"> </i>
<i class = "fa fa -issors custom"> </i>
<i class = "fa fa-strikethrough กำหนดเอง"> </i>
<i class = "fa fa-subscript custom"> </i>
<i class = "fa fa-table custom"> </i>
<i class = "fa fa-text-heigh กำหนดเอง"> </i>
<i class = "fa fa-text-width กำหนดเอง"> </i>
<i class = "fa fa-th custom"> </i>
<i class = "fa fa-th-large custom"> </i>
<i class = "fa fa-th-list custom"> </i>
<i class = "fa fa-underline custom"> </i>
<i class = "fa fa-undo custom"> </i>
<i class = "fa fa-Unlink custom"> </i>

บทนี้จะอธิบายการใช้ไอคอน Font Awesome Directional สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<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>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน Font Awesome Directional แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "fa fa-angle-double-down custom"> </i>
<i class = "fa fa-angle-double-left กำหนดเอง"> </i>
<i class = "fa fa-angle-double-right custom"> </i>
<i class = "fa fa-angle-double-up custom"> </i>
<i class = "fa fa-angle-down custom"> </i>
<i class = "fa fa-angle-left custom"> </i>
<i class = "fa fa-angle-right custom"> </i>
<i class = "fa fa-angle-up custom"> </i>
<i class = "fa fa-arrow-circle-down custom"> </i>
<i class = "fa fa-arrow-circle-left custom"> </i>
<i class = "fa fa-arrow-circle-right custom"> </i>
<i class = "fa fa-arrow-circle-up custom"> </i>
<i class = "fa fa-arrow-circle-o-down custom"> </i>
<i class = "fa fa-arrow-circle-o-left กำหนดเอง"> </i>
<i class = "fa fa-arrow-circle-o-right custom"> </i>
<i class = "fa fa-arrow-circle-o-up custom"> </i>
<i class = "fa fa-arrow-down custom"> </i>
<i class = "fa fa-arrow-left custom"> </i>
<i class = "fa fa-arrow-right custom"> </i>
<i class = "fa fa-arrow-up custom"> </i>
<i class = "fa fa-arrows custom"> </i>
<i class = "fa fa-arrows-alt กำหนดเอง"> </i>
<i class = "fa fa-arrows-h กำหนดเอง"> </i>
<i class = "fa fa-arrows-v กำหนดเอง"> </i>
<i class = "fa fa-caret-down custom"> </i>
<i class = "fa fa-caret-left กำหนดเอง"> </i>
<i class = "fa fa-caret-right custom"> </i>
<i class = "fa fa-caret-up custom"> </i>
<i class = "fa-caret-square-o-down custom"> </i>
<i class = "fa-caret-square-o-left กำหนดเอง"> </i>
<i class = "fa-caret-square-o-right กำหนดเอง"> </i>
<i class = "fa-caret-square-o-up กำหนดเอง"> </i>
<i class = "fa fa-chevron-circle-down custom"> </i>
<i class = "fa-chevron-circle-left กำหนดเอง"> </i>
<i class = "fa-chevron-circle-right custom"> </i>
<i class = "fa fa-chevron-circle-up custom"> </i>
<i class = "fa fa-chevron-down custom"> </i>
<i class = "fa fa-chevron-left กำหนดเอง"> </i>
<i class = "fa fa-chevron-right custom"> </i>
<i class = "fa fa-chevron-up custom"> </i>
<i class = "fa fa-hand-o-down custom"> </i>
<i class = "fa fa-hand-o-left กำหนดเอง"> </i>
<i class = "fa fa-hand-o-right custom"> </i>
<i class = "fa fa-hand-o-up custom"> </i>
<i class = "fa fa-long-arrow-down custom"> </i>
<i class = "fa fa-long-arrow-left กำหนดเอง"> </i>
<i class = "fa fa-long-arrow-right custom"> </i>
<i class = "fa fa-long-arrow-up custom"> </i>
<i class = "fa fa-toggle-down custom"> </i>
<i class = "fa fa-toggle-left กำหนดเอง"> </i>
<i class = "fa fa-toggle-right custom"> </i>
<i class = "fa fa-toggle-up custom"> </i>
<i class = "fa fa-exchange custom"> </i>

บทนี้จะอธิบายการใช้ไอคอน Font Awesome Video Player สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<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>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน Font Awesome Video Player แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ไอคอน
<i class = "fa fa-arrows-alt กำหนดเอง"> </i>
<i class = "fa fa-backward custom"> </i>
<i class = "fa fa-compress custom"> </i>
<i class = "fa-eject custom"> </i>
<i class = "fa fa-expand custom"> </i>
<i class = "fa fa-fast-backward custom"> </i>
<i class = "fa fa-fast-forward custom"> </i>
<i class = "fa fa-forward custom"> </i>
<i class = "fa fa-play-circle custom"> </i>
<i class = "fa fa-play-circle-o custom"> </i>
<i class = "fa fa-random custom"> </i>
<i class = "fa fa-step-backward custom"> </i>
<i class = "fa fa-stop custom"> </i>
<i class = "fa fa-pause custom"> </i>
<i class = "fa fa-play custom"> </i>
<i class = "fa fa-youtube-play custom"> </i>

บทนี้จะอธิบายการใช้งานไอคอน Font Awesome Brand สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<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>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน Font Awesome Brand แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ไอคอน
<i class = "fa fa-500px กำหนดเอง"> </i>
<i class = "fa fa-amazon กำหนดเอง"> </i>
<i class = "fa fa-android custom"> </i>
<i class = "fa fa-angellist custom"> </i>
<i class = "fa fa-adn custom"> </i>
<i class = "fa fa-apple custom"> </i>
<i class = "fa fa-behance custom"> </i>
<i class = "fa fa-behance-square custom"> </i>
<i class = "fa fa-bitbucket custom"> </i>
<i class = "fa-bitbucket-square custom"> </i>
<i class = "fa fa-btc custom"> </i>
<i class = "fa fa-black-tie custom"> </i>
<i class = "fa fa-btc custom"> </i>
<i class = "fa fa-buysellads custom"> </i>
<i class = "fa fa-cc-amex กำหนดเอง"> </i>
<i class = "fa fa-cc-diners-club custom"> </i>
<i class = "fa fa-cc-Discover custom"> </i>
<i class = "fa fa-cc-jcb กำหนดเอง"> </i>
<i class = "fa fa-cc-mastercard custom"> </i>
<i class = "fa fa-cc-paypal กำหนดเอง"> </i>
<i class = "fa fa-cc-stripe custom"> </i>
<i class = "fa fa-cc-visa custom"> </i>
<i class = "fa fa-chrome custom"> </i>
<i class = "fa fa-codepen custom"> </i>
<i class = "fa fa-connectdevelop custom"> </i>
<i class = "fa fa-contao custom"> </i>
<i class = "fa fa-css3 กำหนดเอง"> </i>
<i class = "fa fa-dashcube กำหนดเอง"> </i>
<i class = "fa fa-delicious custom"> </i>
<i class = "fa fa-deviantart custom"> </i>
<i class = "fa fa-digg custom"> </i>
<i class = "fa fa-dribbble custom"> </i>
<i class = "fa fa-dropbox custom"> </i>
<i class = "fa fa-drupal custom"> </i>
<i class = "fa fa-empire custom"> </i>
<i class = "fa fa-Expeditedssl custom"> </i>
<i class = "fa fa-facebook custom"> </i>
<i class = "fa fa-facebook-f กำหนดเอง"> </i>
<i class = "fa fa-facebook-official custom"> </i>
<i class = "fa fa-facebook-square กำหนดเอง"> </i>
<i class = "fa fa-firefox custom"> </i>
<i class = "fa fa-flickr กำหนดเอง"> </i>
<i class = "fa fa-fonticons กำหนดเอง"> </i>
<i class = "fa fa-forumbee custom"> </i>
<i class = "fa fa-foursquare custom"> </i>
<i class = "fa fa-ge custom"> </i>
<i class = "fa fa-get-pocket กำหนดเอง"> </i>
<i class = "fa fa-gg custom"> </i>
<i class = "fa fa-gg-circle custom"> </i>
<i class = "fa fa-git custom"> </i>
<i class = "fa fa-git-square กำหนดเอง"> </i>
<i class = "fa fa-github custom"> </i>
<i class = "fa fa-github-alt กำหนดเอง"> </i>
<i class = "fa fa-github-square custom"> </i>
<i class = "fa fa-gratipay custom"> </i>
<i class = "fa fa-google custom"> </i>
<i class = "fa fa-google-plus custom"> </i>
<i class = "fa fa-google-plus-square custom"> </i>
<i class = "fa fa-youtube-play custom"> </i>
<i class = "fa fa-gratipay custom"> </i>
<i class = "fa fa-hacker-news custom"> </i>
<i class = "fa fa-houzz custom"> </i>
<i class = "fa fa-html5 กำหนดเอง"> </i>
<i class = "fa fa-instagram custom"> </i>
<i class = "fa fa-internet-explorer custom"> </i>
<i class = "fa fa-ioxhost custom"> </i>
<i class = "fa fa-joomla custom"> </i>
<i class = "fa fa-jsfiddle กำหนดเอง"> </i>
<i class = "fa fa-lastfm custom"> </i>
<i class = "fa fa-lastfm-square custom"> </i>
<i class = "fa fa-leanpub custom"> </i>
<i class = "fa fa-linkedin custom"> </i>
<i class = "fa fa-linkedin-square custom"> </i>
<i class = "fa fa-linux กำหนดเอง"> </i>
<i class = "fa fa-maxcdn กำหนดเอง"> </i>
<i class = "fa fa-meanpath custom"> </i>
<i class = "fa fa-medium custom"> </i>
<i class = "fa fa-odnoklassniki กำหนดเอง"> </i>
<i class = "fa-odnoklassniki-square custom"> </i>
<i class = "fa fa-opencart custom"> </i>
<i class = "fa fa-opera custom"> </i>
<i class = "fa fa-optin-monster custom"> </i>
<i class = "fa fa-openid custom"> </i>
<i class = "fa fa-pagelines custom"> </i>
<i class = "fa fa-youtube custom"> </i>
<i class = "fa fa-pied-piper กำหนดเอง"> </i>
<i class = "fa fa-pied-piper-alt กำหนดเอง"> </i>
<i class = "fa fa-pinterest custom"> </i>
<i class = "fa fa-pinterest-p custom"> </i>
<i class = "fa fa-pinterest-square custom"> </i>
<i class = "fa fa-qq กำหนดเอง"> </i>
<i class = "fa fa-ra custom"> </i>
<i class = "fa fa-rebel custom"> </i>
<i class = "fa fa-reddit custom"> </i>
<i class = "fa fa-renren custom"> </i>
<i class = "fa fa-amazon กำหนดเอง"> </i>
<i class = "fa fa-safari custom"> </i>
<i class = "fa fa-selly custom"> </i>
<i class = "fa fa-youtube-square custom"> </i>
<i class = "fa fa-share-alt custom"> </i>
<i class = "fa fa-share-alt-square กำหนดเอง"> </i>
<i class = "fa fa-shirtsinbulk custom"> </i>
<i class = "fa fa-simplybuilt custom"> </i>
<i class = "fa fa-skyatlas custom"> </i>
<i class = "fa fa-skype custom"> </i>
<i class = "fa fa-slack custom"> </i>
<i class = "fa fa-yc-square กำหนดเอง"> </i>
<i class = "fa fa-soundcloud กำหนดเอง"> </i>
<i class = "fa fa-spotify custom"> </i>
<i class = "fa fa-stack-exchange custom"> </i>
<i class = "fa fa-stack-overflow custom"> </i>
<i class = "fa fa-steam custom"> </i>
<i class = "fa fa-steam-square custom"> </i>
<i class = "fa fa-stumbleupon custom"> </i>
<i class = "fa-stumbleupon-circle custom"> </i>
<i class = "fa fa-tencent-weibo กำหนดเอง"> </i>
<i class = "fa fa-trello กำหนดเอง"> </i>
<i class = "fa fa-tripadvisor custom"> </i>
<i class = "fa fa-tumblr custom"> </i>
<i class = "fa fa-tumblr-square custom"> </i>
<i class = "fa fa-yahoo กำหนดเอง"> </i>
<i class = "fa fa-twitter custom"> </i>
<i class = "fa fa-twitter-square กำหนดเอง"> </i>
<i class = "fa fa-viacoin กำหนดเอง"> </i>
<i class = "fa fa-vimeo custom"> </i>
<i class = "fa fa-vimeo-square กำหนดเอง"> </i>
<i class = "fa fa-vine custom"> </i>
<i class = "fa fa-vk custom"> </i>
<i class = "fa fa-wechat custom"> </i>
<i class = "fa fa-weibo กำหนดเอง"> </i>
<i class = "fa fa-weixin custom"> </i>
<i class = "fa fa-whatsapp กำหนดเอง"> </i>
<i class = "fa fa-wikipedia-w กำหนดเอง"> </i>
<i class = "fa fa-windows custom"> </i>
<i class = "fa fa-wordpress custom"> </i>
<i class = "fa fa-xing custom"> </i>
<i class = "fa fa-xing-square กำหนดเอง"> </i>
<i class = "fa fa-y-combinator custom"> </i>
<i class = "fa fa-y-combinator-square custom"> </i>
<i class = "fa fa-yc กำหนดเอง"> </i>

บทนี้จะอธิบายการใช้ไอคอน Font Awesome Medical สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<html>
   <head>
      <link rel = "stylesheet" href = "http://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>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน Font Awesome Medical แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ไอคอน
<i class = "fa fa-ambulance custom"> </i>
<i class = "fa fa-h-square กำหนดเอง"> </i>
<i class = "fa fa-heart custom"> </i>
<i class = "fa fa-heart-o custom"> </i>
<i class = "fa fa-heartbeat custom"> </i>
<i class = "fa fa-hospital-o custom"> </i>
<i class = "fa fa-medkit custom"> </i>
<i class = "fa fa-plus-square custom"> </i>
<i class = "fa fa-stethoscope custom"> </i>
<i class = "fa fa-user-md custom"> </i>
<i class = "fa fa-wheelchair custom"> </i>

Google มีไอคอน 750 ชุดซึ่งออกแบบภายใต้ "หลักเกณฑ์การออกแบบวัสดุ" ซึ่งเรียกว่า Material Designไอคอน ไอคอนเหล่านี้เรียบง่ายและรองรับเว็บเบราว์เซอร์สมัยใหม่ทั้งหมด เนื่องจากไอคอนเหล่านี้เป็นแบบเวกเตอร์จึงสามารถปรับขนาดได้เช่นกัน ในการใช้ไอคอนเหล่านี้เราต้องโหลดฟอนต์ (ไลบรารี)material-icons.

การโหลดฟอนต์ (ไลบรารี)

ในการโหลดไลบรารีไอคอนวัสดุให้คัดลอกและวางบรรทัดต่อไปนี้ในส่วน <head> ของเว็บเพจ

<head>
   <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>

การใช้ไอคอน

ไอคอนวัสดุของ Google มีรายการไอคอนมากมาย เลือกรายการใดรายการหนึ่งและเพิ่มชื่อของคลาสไอคอนให้กับองค์ประกอบ HTML ใด ๆ ภายในแท็ก <body> ในตัวอย่างต่อไปนี้เราได้ใช้ไอคอนชื่อaccessibility ที่อยู่ในหมวดการกระทำ

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
   </head>
	
   <body>
      <i class = "material-icons">accessibility</i>
   </body>
	
</html>

มันจะสร้างผลลัพธ์ต่อไปนี้ -

การกำหนดขนาด

คุณสามารถเพิ่มหรือลดขนาดของไอคอนได้โดยกำหนดขนาดใน CSS และใช้ร่วมกับชื่อคลาสดังที่แสดงด้านล่าง ในตัวอย่างต่อไปนี้เราได้ประกาศขนาดเป็น 6 em

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.mysize {font-size: 6em;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons mysize">accessibility</i>
   </body>
	
</html>

มันจะสร้างผลลัพธ์ต่อไปนี้ -

การกำหนดสี

คุณสามารถใช้ CSS เพื่อกำหนดสีของไอคอน ตัวอย่างต่อไปนี้แสดงวิธีเปลี่ยนสีของไอคอนที่เรียกว่าaccessibility.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

มันจะสร้างผลลัพธ์ต่อไปนี้ -

รายการหมวดหมู่

แบบอักษร Material Icons ของ Google มี 519 ไอคอนในหมวดหมู่ต่อไปนี้ -

ไอคอนการกระทำ
ไอคอนแจ้งเตือน
ไอคอน AV
ไอคอนการสื่อสาร
ไอคอนเนื้อหา
ไอคอนอุปกรณ์
ไอคอนแก้ไข
ไอคอนไฟล์
ไอคอนฮาร์ดแวร์
ไอคอนรูปภาพ
ไอคอนแผนที่
ไอคอนการนำทาง
ไอคอนการแจ้งเตือน
ไอคอนโซเชียล
สลับไอคอน

ในการใช้ไอคอนเหล่านี้คุณต้องแทนที่ชื่อคลาสในโปรแกรมที่กำหนดในบทนี้ด้วยชื่อคลาสของไอคอนที่ต้องการ ในบทต่อ ๆ ไปของหน่วยนี้ (ไอคอนวัสดุ) เราได้อธิบายการใช้งานและผลลัพธ์ตามลำดับของไอคอนวัสดุต่างๆ

บทนี้จะอธิบายการใช้ไอคอนการกระทำ (วัสดุ) ของ 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> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "material-icons custom"> 3d_rotation </i>	3d_rotation
<i class = "material-icons custom"> การช่วยการเข้าถึง </i>	การเข้าถึง
<i class = "material-icons custom"> account_balance </i>	ยอดเงินในบัญชี
<i class = "material-icons custom"> account_balance_wallet </i>	account_balance_wallet
<i class = "material-icons custom"> account_box </i>	account_box
<i class = "material-icons custom"> account_circle </i>	account_circle
<i class = "material-icons custom"> add_shopping_cart </i>	add_shopping_cart
<i class = "material-icons custom"> นาฬิกาปลุก </i>	นาฬิกาปลุก
<i class = "material-icons custom"> alarm_add </i>	alarm_add
<i class = "material-icons custom"> alarm_off </i>	alarm_off
<i class = "material-icons custom"> alarm_on </i>	alarm_on
<i class = "material-icons custom"> android </i>	แอนดรอยด์
<i class = "material-icons custom"> ประกาศ </i>	ประกาศ
<i class = "material-icons custom"> อัตราส่วนภาพ </i>	อัตราส่วนกว้างยาว
<i class = "material-icons custom"> การประเมิน </i>	การประเมิน
<i class = "material-icons custom"> งาน </i>	มอบหมาย
<i class = "material-icons custom"> assignment_ind </i>	assignment_ind
<i class = "material-icons custom"> assignment_late </i>	assignment_late
<i class = "material-icons custom"> assignment_return </i>	assignment_return
<i class = "material-icons custom"> assignment_returned </i>	assignment_returned
<i class = "material-icons custom"> assignment_turned_in </i>	assignment_turned_in
<i class = "material-icons custom"> ใหม่อัตโนมัติ </i>	autorenew
<i class = "material-icons custom"> สำรองข้อมูล </i>	การสำรองข้อมูล
<i class = "material-icons custom"> หนังสือ </i>	หนังสือ
<i class = "material-icons custom"> บุ๊กมาร์ก </i>	บุ๊คมาร์ค
<i class = "material-icons custom"> bookmark_border </i>	bookmark_border
<i class = "material-icons custom"> bug_report </i>	bug_report
<i class = "material-icons custom"> สร้าง </i>	สร้าง
<i class = "material-icons custom"> แคช </i>	แคช
<i class = "material-icons custom"> camera_enhance </i>	camera_enhance
<i class = "material-icons custom"> card_giftcard </i>	card_giftcard
<i class = "material-icons custom"> card_membership </i>	card_membership
<i class = "material-icons custom"> card_travel </i>	card_travel
<i class = "material-icons custom"> change_history </i>	change_history
<i class = "material-icons custom"> check_circle </i>	check_circle
<i class = "material-icons custom"> chrome_reader_mode </i>	chrome_reader_mode
<i class = "material-icons custom"> คลาส </i>	ชั้นเรียน
<i class = "material-icons custom"> รหัส </i>	รหัส
<i class = "material-icons custom"> บัตรเครดิต </i>	บัตรเครดิต
<i class = "material-icons custom"> แดชบอร์ด </i>	แผงควบคุม
<i class = "material-icons custom"> ลบ </i>	ลบ
<i class = "material-icons custom"> คำอธิบาย </i>	คำอธิบาย
<i class = "material-icons custom"> DNS </i>	dns
<i class = "material-icons custom"> เสร็จสิ้น </i>	เสร็จแล้ว
<i class = "material-icons custom"> done_all </i>	done_all
<i class = "material-icons custom"> นำออก </i>	ดีดออก
<i class = "material-icons custom"> เหตุการณ์ </i>	เหตุการณ์
<i class = "material-icons custom"> event_seat </i>	event_seat
<i class = "material-icons custom"> exit_to_app </i>	exit_to_app
<i class = "material-icons custom"> สำรวจ </i>	สำรวจ
<i class = "material-icons custom"> ส่วนขยาย </i>	ส่วนขยาย
<i class = "material-icons custom"> ใบหน้า </i>	ใบหน้า
<i class = "material-icons custom"> รายการโปรด </i>	รายการโปรด
<i class = "material-icons custom"> favorite_border </i>	favorite_border
<i class = "material-icons custom"> ข้อเสนอแนะ </i>	ข้อเสนอแนะ
<i class = "material-icons custom"> find_in_page </i>	find_in_page
<i class = "material-icons custom"> find_replace </i>	find_replace
<i class = "material-icons custom"> flight_land </i>	flight_land
<i class = "material-icons custom"> flight_takeoff </i>	flight_takeoff
<i class = "material-icons custom"> flip_to_back </i>	flip_to_back
<i class = "material-icons custom"> flip_to_front </i>	flip_to_front
<i class = "material-icons custom"> get_app </i>	get_app
<i class = "material-icons custom"> gif </i>	gif
<i class = "material-icons custom"> เกรด </i>	เกรด
<i class = "material-icons custom"> group_work </i>	งานกลุ่ม
<i class = "material-icons custom"> ความช่วยเหลือ </i>	ช่วยด้วย
<i class = "material-icons custom"> help_outline </i>	help_outline
<i class = "material-icons custom"> highlight_off </i>	highlight_off
<i class = "material-icons custom"> ประวัติ </i>	ประวัติศาสตร์
<i class = "material-icons custom"> บ้าน </i>	บ้าน
<i class = "material-icons custom"> hourglass_empty </i>	hourglass_empty
<i class = "material-icons custom"> hourglass_full </i>	hourglass_full
<i class = "material-icons custom"> http </i>	http
<i class = "material-icons custom"> https </i>	https
<i class = "material-icons custom"> ข้อมูล </i>	ข้อมูล
<i class = "material-icons custom"> info_outline </i>	info_outline
<i class = "material-icons custom"> อินพุต </i>	อินพุต
<i class = "material-icons custom"> invert_colors </i>	invert_colors
<i class = "material-icons custom"> ป้ายกำกับ </i>	ฉลาก
<i class = "material-icons custom"> label_outline </i>	label_outline
<i class = "material-icons custom"> ภาษา </i>	ภาษา
<i class = "material-icons custom"> เปิดใช้งาน </i>	เปิด
<i class = "material-icons custom"> รายการ </i>	รายการ
<i class = "material-icons custom"> ล็อก </i>	ล็อค
<i class = "material-icons custom"> lock_open </i>	lock_open
<i class = "material-icons custom"> lock_outline </i>	lock_outline
<i class = "material-icons custom"> ความภักดี </i>	ความภักดี
<i class = "material-icons custom"> markunread_mailbox </i>	markunread_mailbox
<i class = "material-icons custom"> note_add </i>	note_add
<i class = "material-icons custom"> offline_pin </i>	Offline_pin
<i class = "material-icons custom"> open_in_browser </i>	เปิดในเบราว์เซอร์
<i class = "material-icons custom"> open_in_new </i>	open_in_new
<i class = "material-icons custom"> open_with </i>	เปิดด้วย
<i class = "material-icons custom"> การดูหน้าเว็บ </i>	การดูหน้าเว็บ
<i class = "material-icons custom"> การชำระเงิน </i>	การชำระเงิน
<i class = "material-icons custom"> perm_camera_mic </i>	perm_camera_mic
<i class = "material-icons custom"> perm_contact_cale </i>	perm_contact_cale
<i class = "material-icons custom"> perm_data_settings </i>	perm_data_settings
<i class = "material-icons custom"> perm_device_information </i>	perm_device_information
<i class = "material-icons custom"> perm_identity </i>	perm_identity
<i class = "material-icons custom"> perm_media </i>	perm_media
<i class = "material-icons custom"> perm_phone_msg </i>	perm_phone_msg
<i class = "material-icons custom"> perm_scan_wifi </i>	perm_scan_wifi
<i class = "material-icons custom"> picture_in_picture </i>	picture_in_picture
<i class = "material-icons custom"> play_for_work </i>	play_for_work
<i class = "material-icons custom"> โพลีเมอร์ </i>	พอลิเมอร์
<i class = "material-icons custom"> power_settings_new </i>	power_settings_new
<i class = "material-icons custom"> พิมพ์ </i>	พิมพ์
<i class = "material-icons custom"> query_builder </i>	query_builder
<i class = "material-icons custom"> question_answer </i>	คำถามคำตอบ
<i class = "material-icons custom"> ใบเสร็จ </i>	ใบเสร็จรับเงิน
<i class = "material-icons custom"> แลก </i>	แลก
<i class = "material-icons custom"> จัดลำดับใหม่ </i>	จัดลำดับใหม่
<i class = "material-icons custom"> report_problem </i>	report_problem
<i class = "material-icons custom"> คืนค่า </i>	คืนค่า
<i class = "material-icons custom"> ห้อง </i>	ห้อง
<i class = "material-icons custom"> กำหนดเวลา </i>	กำหนดการ
<i class = "material-icons custom"> ค้นหา </i>	ค้นหา
<i class = "material-icons custom"> การตั้งค่า </i>	การตั้งค่า
<i class = "material-icons custom"> settings_applications </i>	settings_applications
<i class = "material-icons custom"> settings_bluetooth </i>	settings_bluetooth
<i class = "material-icons custom"> settings_brightness </i>	settings_brightness
<i class = "material-icons custom"> settings_cell </i>	settings_cell
<i class = "material-icons custom"> settings_ethernet </i>	settings_ethernet
<i class = "material-icons custom"> settings_input_antenna </i>	settings_input_antenna
<i class = "material-icons custom"> settings_input_component </i>	settings_input_component
<i class = "material-icons custom"> settings_input_hdmi </i>	settings_input_hdmi
<i class = "material-icons custom"> settings_input_svideo </i>	settings_input_svideo
<i class = "material-icons custom"> settings_overscan </i>	settings_overscan
<i class = "material-icons custom"> settings_phone </i>	settings_phone
<i class = "material-icons custom"> settings_power </i>	settings_power
<i class = "material-icons custom"> settings_remote </i>	settings_remote
<i class = "material-icons custom"> settings_voice </i>	settings_voice
<i class = "material-icons custom"> ร้านค้า </i>	ร้านค้า
<i class = "material-icons custom"> shop_two </i>	shop_two
<i class = "material-icons custom"> shopping_basket </i>	shopping_basket
<i class = "material-icons custom"> shopping_cart </i>	shopping_cart
<i class = "material-icons custom"> speaker_notes </i>	speaker_notes
<i class = "material-icons custom"> ตรวจการสะกด </i>	ตรวจสอบการสะกด
<i class = "material-icons custom"> star_rate </i>	star_rate
<i class = "material-icons custom"> ดาว </i>	ดาว
<i class = "material-icons custom"> จัดเก็บ </i>	เก็บ
<i class = "material-icons custom"> เรื่อง </i>	เรื่อง
<i class = "material-icons custom"> Supervisor_account </i>	Supervisor_account
<i class = "material-icons custom"> swap_horiz </i>	swap_horiz
<i class = "material-icons custom"> swap_vert </i>	swap_vert
<i class = "material-icons custom"> swap_vertical_circle </i>	swap_vertical_circle
<i class = "material-icons custom"> system_update_alt </i>	system_update_alt
<i class = "material-icons custom"> แท็บ </i>	แท็บ
<i class = "material-icons custom"> tab_unselected </i>	tab_unselected
<i class = "material-icons custom"> โรงภาพยนตร์ </i>	โรงภาพยนตร์
<i class = "material-icons custom"> thumb_down </i>	thumb_down
<i class = "material-icons custom"> thumb_up </i>	นิ้วหัวแม่มือขึ้น
<i class = "material-icons custom"> thumbs_up_down </i>	thumbs_up_down
<i class = "material-icons custom"> toc </i>	toc
<i class = "material-icons custom"> วันนี้ </i>	วันนี้
<i class = "material-icons custom"> ค่าผ่านทาง </i>	โทร
<i class = "material-icons custom"> track_changes </i>	track_changes
<i class = "material-icons custom"> แปล </i>	แปลภาษา
<i class = "material-icons custom"> trending_down </i>	trending_down
<i class = "material-icons custom"> trending_flat </i>	trending_flat
<i class = "material-icons custom"> trending_up </i>	trending_up
<i class = "material-icons custom"> turn_in </i>	หันมา
<i class = "material-icons custom"> valid_user </i>	Verified_user
<i class = "material-icons custom"> view_agenda </i>	view_agenda
<i class = "material-icons custom"> view_array </i>	view_array
<i class = "material-icons custom"> view_carousel </i>	view_carousel
<i class = "material-icons custom"> view_column </i>	view_column
<i class = "material-icons custom"> view_day </i>	view_day
<i class = "material-icons custom"> view_headline </i>	view_headline
<i class = "material-icons custom"> view_list </i>	view_list
<i class = "material-icons custom"> view_module </i>	view_module
<i class = "material-icons custom"> view_quilt </i>	view_quilt
<i class = "material-icons custom"> view_stream </i>	view_stream
<i class = "material-icons custom"> view_week </i>	view_week
<i class = "material-icons custom"> การเปิดเผย </i>	ทัศนวิสัย
<i class = "material-icons custom"> visibility_off </i>	visibility_off
<i class = "material-icons custom"> งาน </i>	งาน
<i class = "material-icons custom"> youtube_searched_for </i>	youtube_searched_for
<i class = "material-icons custom"> zoom_in </i>	ขยายเข้า
<i class = "material-icons custom"> zoom_out </i>	ซูมออก

บทนี้จะอธิบายการใช้งานไอคอนการแจ้งเตือน (วัสดุ) ของ 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"> add_alert </i>	add_alert
<i class = "material-icons custom"> ข้อผิดพลาด </i>	ข้อผิดพลาด
<i class = "material-icons custom"> error_outline </i>	error_outline
<i class = "material-icons custom"> คำเตือน </i>	คำเตือน

บทนี้จะอธิบายการใช้งานไอคอน AV (วัสดุ) ของ 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>

ตารางต่อไปนี้แสดงการใช้งานและผลลัพธ์ของไอคอน AV (Material) ของ Google แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "material-icons custom"> ออกอากาศ </i>	ออกอากาศ
<i class = "material-icons custom"> อัลบั้ม </i>	อัลบั้ม
<i class = "material-icons custom"> av_timer </i>	av_timer
<i class = "material-icons custom"> closed_caption </i>	closed_caption
<i class = "material-icons custom"> อีควอไลเซอร์ </i>	อีควอไลเซอร์
<i class = "material-icons custom"> โจ่งแจ้ง </i>	ชัดเจน
<i class = "material-icons custom"> fast_forward </i>	fast_forward
<i class = "material-icons custom"> fast_rewind </i>	fast_rewind
<i class = "material-icons custom"> forward_10 </i>	forward_10
<i class = "material-icons custom"> forward_30 </i>	forward_30
<i class = "material-icons custom"> forward_5 </i>	forward_5
<i class = "material-icons custom"> เกม </i>	เกม
<i class = "material-icons custom"> hd </i>	hd
<i class = "material-icons custom"> การได้ยิน </i>	การได้ยิน
<i class = "material-icons custom"> คุณภาพสูง </i>	คุณภาพสูง
<i class = "material-icons custom"> library_add </i>	library_add
<i class = "material-icons custom"> library_books </i>	library_books
<i class = "material-icons custom"> library_music </i>	library_music
<i class = "material-icons custom"> วนซ้ำ </i>	วน
<i class = "material-icons custom"> ไมโครโฟน </i>	ไมค์
<i class = "material-icons custom"> mic_none </i>	mic_none
<i class = "material-icons custom"> mic_off </i>	mic_off
<i class = "material-icons custom"> ภาพยนตร์ </i>	ภาพยนตร์
<i class = "material-icons custom"> pause_circle_outline </i>	pause_circle_outline
<i class = "material-icons custom"> new_releases </i>	new_releases
<i class = "material-icons custom"> ไม่สนใจ </i>	ไม่สนใจ
<i class = "material-icons custom"> หยุดชั่วคราว </i>	หยุด
<i class = "material-icons custom"> pause_circle_filled </i>	pause_circle_filled
<i class = "material-icons custom"> play_arrow </i>	play_arrow
<i class = "material-icons custom"> play_circle_filled </i>	play_circle_filled
<i class = "material-icons custom"> play_circle_outline </i>	play_circle_outline
<i class = "material-icons custom"> playlist_add </i>	playlist_add
<i class = "material-icons custom"> คิว </i>	คิว
<i class = "material-icons custom"> que_music </i>	Que_music
<i class = "material-icons custom"> วิทยุ </i>	วิทยุ
<i class = "material-icons custom"> Recent_actors </i>	Recent_actors
<i class = "material-icons custom"> ทำซ้ำ </i>	ทำซ้ำ
<i class = "material-icons custom"> repeat_one </i>	repeat_one
<i class = "material-icons custom"> เล่นซ้ำ </i>	เล่นซ้ำ
<i class = "material-icons custom"> ออกอากาศ </i>	replay_10
<i class = "material-icons custom"> replay_30 </i>	replay_30
<i class = "material-icons custom"> replay_5 </i>	replay_5
<i class = "material-icons custom"> สับเปลี่ยน </i>	สับเปลี่ยน
<i class = "material-icons custom"> skip_next </i>	skip_next
<i class = "material-icons custom"> skip_previous </i>	skip_previous
<i class = "material-icons custom"> เลื่อนปลุก </i>	งีบหลับ
<i class = "material-icons custom"> sort_by_alpha </i>	sort_by_alpha
<i class = "material-icons custom"> หยุด </i>	หยุด
<i class = "material-icons custom"> คำบรรยาย </i>	คำบรรยาย
<i class = "material-icons custom"> surround_sound </i>	เสียงรอบทิศทาง
<i class = "material-icons custom"> video_library </i>	video_library
<i class = "material-icons custom"> วิดีโอแคม </i>	วิดีโอแคม
<i class = "material-icons custom"> videocam_off </i>	videocam_off
<i class = "material-icons custom"> volume_down </i>	ลดเสียงลง
<i class = "material-icons custom"> volume_mute </i>	volume_mute
<i class = "material-icons custom"> volume_off </i>	volume_off
<i class = "material-icons custom"> volume_up </i>	ปรับระดับเสียงขึ้น
<i class = "material-icons custom"> เว็บ </i>	เว็บ

บทนี้จะอธิบายการใช้ไอคอนการสื่อสาร (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

บทนี้อธิบายการใช้ไอคอนเนื้อหา (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"> add_box </i>	add_box
<i class = "material-icons custom"> add_circle </i>	add_circle
<i class = "material-icons custom"> add_circle_outline </i>	add_circle_outline
<i class = "material-icons custom"> เก็บถาวร </i>	เก็บถาวร
<i class = "material-icons custom"> backspace </i>	backspace
<i class = "material-icons custom"> บล็อก </i>	บล็อก
<i class = "material-icons custom"> ล้าง </i>	ชัดเจน
<i class = "material-icons custom"> content_copy </i>	content_copy
<i class = "material-icons custom"> content_cut </i>	content_cut
<i class = "material-icons custom"> content_paste </i>	content_paste
<i class = "material-icons custom"> สร้าง </i>	สร้าง
<i class = "material-icons custom"> แบบร่าง </i>	ร่าง
<i class = "material-icons custom"> filter_list </i>	filter_list
<i class = "material-icons custom"> ตั้งค่าสถานะ </i>	ธง
<i class = "material-icons custom"> font_download </i>	font_download
<i class = "material-icons custom"> ไปข้างหน้า </i>	ไปข้างหน้า
<i class = "material-icons custom"> ท่าทาง </i>	ท่าทาง
<i class = "material-icons custom"> กล่องจดหมาย </i>	กล่องจดหมาย
<i class = "material-icons custom"> ลิงก์ </i>	ลิงค์
<i class = "material-icons custom"> จดหมาย </i>	จดหมาย
<i class = "material-icons custom"> markunread </i>	markunread
<i class = "material-icons custom"> ทำซ้ำ </i>	ทำซ้ำ
<i class = "material-icons custom"> ลบ </i>	ลบ
<i class = "material-icons custom"> remove_circle </i>	remove_circle
<i class = "material-icons custom"> remove_circle_outline </i>	remove_circle_outline
<i class = "material-icons custom"> ตอบกลับ </i>	ตอบ
<i class = "material-icons custom"> reply_all </i>	ตอบทั้งหมด
<i class = "material-icons custom"> รายงาน </i>	รายงาน
<i class = "material-icons custom"> บันทึก </i>	บันทึก
<i class = "material-icons custom"> select_all </i>	เลือกทั้งหมด
<i class = "material-icons custom"> ส่ง </i>	ส่ง
<i class = "material-icons custom"> จัดเรียง </i>	เรียงลำดับ
<i class = "material-icons custom"> text_format </i>	text_format
<i class = "material-icons custom"> stay_current_portrait </i>	stay_current_portrait
<i class = "material-icons custom"> เลิกทำ </i>	เลิกทำ

บทนี้ให้คุณใช้งานไอคอนอุปกรณ์ (วัสดุ) ของ 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

การใช้งาน	ผลลัพธ์
<i class = "material-icons custom"> access_alarm </i>	access_alarm
<i class = "material-icons custom"> access_alarms </i>	access_alarms
<i class = "material-icons custom"> access_time </i>	access_time
<i class = "material-icons custom"> add_alarm </i>	add_alarm
<i class = "material-icons custom"> airplanemode_active </i>	airplanemode_active
<i class = "material-icons custom"> airplanemode_inactive </i>	airplanemode_inactive
<i class = "material-icons custom"> battery_alert </i>	battery_alert
<i class = "material-icons custom"> battery_charging_full </i>	battery_charging_full
<i class = "material-icons custom"> battery_full </i>	battery_full
<i class = "material-icons custom"> battery_std </i>	battery_std
<i class = "material-icons custom"> battery_unknown </i>	battery_unknown
<i class = "material-icons custom"> บลูทู ธ </i>	บลูทู ธ
<i class = "material-icons custom"> bluetooth_connected </i>	bluetooth_connected
<i class = "material-icons custom"> bluetooth_disabled </i>	Bluetooth_disabled
<i class = "material-icons custom"> bluetooth_searching </i>	bluetooth_searching
<i class = "material-icons custom"> ความสว่าง _auto </i>	bright_auto
<i class = "material-icons custom"> ความสว่างสูง </i>	ความสว่างสูง
<i class = "material-icons custom"> bright_low </i>	bright_low
<i class = "material-icons custom"> bright_medium </i>	bright_medium
<i class = "material-icons custom"> data_usage </i>	data_usage
<i class = "material-icons custom"> developer_mode </i>	โหมดนักพัฒนา
<i class = "material-icons custom"> อุปกรณ์ </i>	อุปกรณ์
<i class = "material-icons custom"> dvr </i>	dvr
<i class = "material-icons custom"> gps_fixed </i>	gps_fixed
<i class = "material-icons custom"> gps_not_fixed </i>	gps_not_fixed
<i class = "material-icons custom"> gps_off </i>	gps_off
<i class = "material-icons custom"> graphic_eq </i>	graphic_eq
<i class = "material-icons custom"> location_disabled </i>	location_disabled
<i class = "material-icons custom"> location_searching </i>	location_searching
<i class = "material-icons custom"> network_cell </i>	network_cell
<i class = "material-icons custom"> network_wifi </i>	network_wifi
<i class = "material-icons custom"> screen_lock_landscape </i>	screen_lock_landscape
<i class = "material-icons custom"> screen_lock_portrait </i>	screen_lock_portrait
<i class = "material-icons custom"> screen_lock_rotation </i>	screen_lock_rotation
<i class = "material-icons custom"> screen_rotation </i>	screen_rotation
<i class = "material-icons custom"> sd_storage </i>	sd_storage
<i class = "material-icons custom"> settings_system_daydream </i>	settings_system_daydream
<i class = "material-icons custom"> signal_cellular_4_bar </i>	signal_cellular_4_bar
<i class = "material-icons custom"> wifi_tethering </i>	wifi_tethering
<i class = "material-icons custom"> signal_cellular_no_sim </i>	signal_cellular_no_sim
<i class = "material-icons custom"> signal_cellular_null </i>	signal_cellular_null
<i class = "material-icons custom"> signal_cellular_off </i>	signal_cellular_off
<i class = "material-icons custom"> signal_wifi_4_bar </i>	signal_wifi_4_bar
<i class = "material-icons custom"> signal_wifi_4_bar_lock </i>	signal_wifi_4_bar_lock
<i class = "material-icons custom"> signal_wifi_off </i>	signal_wifi_off
<i class = "material-icons custom"> ที่เก็บข้อมูล </i>	การจัดเก็บ
<i class = "material-icons custom"> usb </i>	ยูเอสบี
<i class = "material-icons custom"> วอลเปเปอร์ </i>	วอลล์เปเปอร์
<i class = "material-icons custom"> วิดเจ็ต </i>	วิดเจ็ต
<i class = "material-icons custom"> wifi_lock </i>	wifi_lock
<i class = "material-icons custom"> signal_cellular_connected_no_internet_4_bar </i>	signal_cellular_connected_no_internet_4_bar

บทนี้จะอธิบายการใช้งานไอคอน (Material) Editor ของ 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) Editor ของ Google แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "material-icons custom"> attach_file </i>	แนบไฟล์
<i class = "material-icons custom"> attach_money </i>	attach_money
<i class = "material-icons custom"> border_all </i>	border_all
<i class = "material-icons custom"> border_bottom </i>	border_bottom
<i class = "material-icons custom"> border_clear </i>	border_clear
<i class = "material-icons custom"> border_color </i>	border_color
<i class = "material-icons custom"> border_horizontal </i>	border_horizontal
<i class = "material-icons custom"> border_inner </i>	border_inner
<i class = "material-icons custom"> border_left </i>	border_left
<i class = "material-icons custom"> border_outer </i>	border_outer
<i class = "material-icons custom"> border_right </i>	border_right
<i class = "material-icons custom"> border_style </i>	border_style
<i class = "material-icons custom"> border_top </i>	border_top
<i class = "material-icons custom"> border_vertical </i>	border_vertical
<i class = "material-icons custom"> format_align_center </i>	format_align_center
<i class = "material-icons custom"> format_align_justify </i>	format_align_justify
<i class = "material-icons custom"> format_align_left </i>	format_align_left
<i class = "material-icons custom"> format_align_right </i>	format_align_right
<i class = "material-icons custom"> format_bold </i>	format_bold
<i class = "material-icons custom"> format_clear </i>	format_clear
<i class = "material-icons custom"> format_color_fill </i>	format_color_fill
<i class = "material-icons custom"> format_color_reset </i>	format_color_reset
<i class = "material-icons custom"> format_color_text </i>	format_color_text
<i class = "material-icons custom"> format_indent_decrease </i>	format_indent_decrease
<i class = "material-icons custom"> format_indent_increase </i>	format_indent_increase
<i class = "material-icons custom"> format_italic </i>	format_italic
<i class = "material-icons custom"> format_line_spacing </i>	format_line_spacing
<i class = "material-icons custom"> format_list_bulleted </i>	format_list_bulleted
<i class = "material-icons custom"> format_list_numbered </i>	format_list_numbered
<i class = "material-icons custom"> format_paint </i>	format_paint
<i class = "material-icons custom"> format_quote </i>	format_quote
<i class = "material-icons custom"> format_size </i>	format_size
<i class = "material-icons custom"> format_strikethrough </i>	format_strikethrough
<i class = "material-icons custom"> format_textdirection_l_to_r </i>	format_textdirection_l_to_r
<i class = "material-icons custom"> format_textdirection_r_to_l </i>	format_textdirection_r_to_l
<i class = "material-icons custom"> format_underline </i>	format_underline
<i class = "material-icons custom"> ฟังก์ชัน </i>	ฟังก์ชั่น
<i class = "material-icons custom"> insert_chart </i>	insert_chart
<i class = "material-icons custom"> insert_comment </i>	insert_comment
<i class = "material-icons custom"> insert_drive_file </i>	insert_drive_file
<i class = "material-icons custom"> insert_emoticon </i>	insert_emoticon
<i class = "material-icons custom"> insert_invitation </i>	insert_invitation
<i class = "material-icons custom"> insert_link </i>	insert_link
<i class = "material-icons custom"> insert_photo </i>	insert_photo
<i class = "material-icons custom"> merge_type </i>	merge_type
<i class = "material-icons custom"> mode_comment </i>	mode_comment
<i class = "material-icons custom"> mode_edit </i>	mode_edit
<i class = "material-icons custom"> money_off </i>	money_off
<i class = "material-icons custom"> เผยแพร่ </i>	เผยแพร่
<i class = "material-icons custom"> space_bar </i>	space_bar
<i class = "material-icons custom"> strikethrough_s </i>	strikethrough_s
<i class = "material-icons custom"> vertical_align_bottom </i>	vertical_align_bottom
<i class = "material-icons custom"> vertical_align_center </i>	vertical_align_center
<i class = "material-icons custom"> vertical_align_top </i>	vertical_align_top
<i class = "material-icons custom"> wrap_text </i>	ตัดข้อความ

บทนี้จะอธิบายการใช้ไอคอนไฟล์ (วัสดุ) ของ 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"> cloud_circle </i>	cloud_circle
<i class = "material-icons custom"> cloud_done </i>	cloud_done
<i class = "material-icons custom"> cloud_download </i>	cloud_download
<i class = "material-icons custom"> cloud_off </i>	cloud_off
<i class = "material-icons custom"> cloud_queue </i>	cloud_queue
<i class = "material-icons custom"> cloud_upload </i>	cloud_upload
<i class = "material-icons custom"> file_download </i>	file_download
<i class = "material-icons custom"> file_upload </i>	อัปโหลดไฟล์
<i class = "material-icons custom"> โฟลเดอร์ </i>	โฟลเดอร์
<i class = "material-icons custom"> folder_open </i>	folder_open
<i class = "material-icons custom"> folder_shared </i>	folder_shared

บทนี้อธิบายการใช้ไอคอนฮาร์ดแวร์ (วัสดุ) ของ 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> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "material-icons custom"> แคสต์ </i>	นักแสดง
<i class = "material-icons custom"> cast_connected </i>	cast_connected
<i class = "material-icons custom"> คอมพิวเตอร์ </i>	คอมพิวเตอร์
<i class = "material-icons custom"> desktop_mac </i>	desktop_mac
<i class = "material-icons custom"> desktop_windows </i>	desktop_windows
<i class = "material-icons custom"> developer_board </i>	developer_board
<i class = "material-icons custom"> device_hub </i>	device_hub
<i class = "material-icons custom"> ท่าเรือ </i>	ท่าเรือ
<i class = "material-icons custom"> แป้นเกม </i>	เกมแพด
<i class = "material-icons custom"> ชุดหูฟัง </i>	ชุดหูฟัง
<i class = "material-icons custom"> headset_mic </i>	headset_mic
<i class = "material-icons custom"> แป้นพิมพ์ </i>	แป้นพิมพ์
<i class = "material-icons custom"> keyboard_arrow_down </i>	keyboard_arrow_down
<i class = "material-icons custom"> keyboard_arrow_left </i>	keyboard_arrow_left
<i class = "material-icons custom"> keyboard_arrow_right </i>	keyboard_arrow_right
<i class = "material-icons custom"> keyboard_arrow_up </i>	keyboard_arrow_up
<i class = "material-icons custom"> keyboard_backspace </i>	keyboard_backspace
<i class = "material-icons custom"> keyboard_capslock </i>	keyboard_capslock
<i class = "material-icons custom"> keyboard_hide </i>	keyboard_hide
<i class = "material-icons custom"> keyboard_return </i>	keyboard_return
<i class = "material-icons custom"> keyboard_tab </i>	keyboard_tab
<i class = "material-icons custom"> keyboard_voice </i>	keyboard_voice
<i class = "material-icons custom"> แล็ปท็อป </i>	แล็ปท็อป
<i class = "material-icons custom"> laptop_chromebook </i>	laptop_chromebook
<i class = "material-icons custom"> laptop_mac </i>	laptop_mac
<i class = "material-icons custom"> laptop_windows </i>	laptop_windows
<i class = "material-icons custom"> หน่วยความจำ </i>	หน่วยความจำ
<i class = "material-icons custom"> เมาส์ </i>	เมาส์
<i class = "material-icons custom"> phone_android </i>	phone_android
<i class = "material-icons custom"> phone_iphone </i>	phone_iphone
<i class = "material-icons custom"> phonelink </i>	phonelink
<i class = "material-icons custom"> phonelink_off </i>	phonelink_off
<i class = "material-icons custom"> power_input </i>	power_input
<i class = "material-icons custom"> เราเตอร์ </i>	เราเตอร์
<i class = "material-icons custom"> สแกนเนอร์ </i>	สแกนเนอร์
<i class = "material-icons custom"> ความปลอดภัย </i>	ความปลอดภัย
<i class = "material-icons custom"> sim_card </i>	ซิมการ์ด
<i class = "material-icons custom"> สมาร์ทโฟน </i>	สมาร์ทโฟน
<i class = "material-icons custom"> ลำโพง </i>	ลำโพง
<i class = "material-icons custom"> speaker_group </i>	speaker_group
<i class = "material-icons custom"> แท็บเล็ต </i>	ยาเม็ด
<i class = "material-icons custom"> tablet_android </i>	tablet_android
<i class = "material-icons custom"> tablet_mac </i>	tablet_mac
<i class = "material-icons custom"> ของเล่น </i>	ของเล่น
<i class = "material-icons custom"> ทีวี </i>	โทรทัศน์
<i class = "material-icons custom"> ดู </i>	ดู

บทนี้อธิบายการใช้ไอคอนรูปภาพ (วัสดุ) ของ 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> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "material-icons custom"> add_to_photos </i>	add_to_photos
<i class = "material-icons custom"> ปรับ </i>	ปรับ
<i class = "material-icons custom"> ผู้ช่วย </i>	ผู้ช่วย
<i class = "material-icons custom"> ผู้ช่วย </i>	ผู้ช่วย
<i class = "material-icons custom"> audiotrack </i>	ออดิโอแทร็ก
<i class = "material-icons custom"> เบลอ _ วงกลม </i>	เบลอ _ วงกลม
<i class = "material-icons custom"> เบลอ _ เส้นตรง </i>	เบลอเส้น
<i class = "material-icons custom"> เบลอ _ ออฟ </i>	เบลอ _ ออฟ
<i class = "material-icons custom"> เบลอ _ บน </i>	เบลอ _ บน
<i class = "material-icons custom"> bright_1 </i>	bright_1
<i class = "material-icons custom"> bright_2 </i>	bright_2
<i class = "material-icons custom"> ความสว่าง _3 </i>	ความสว่าง _3
<i class = "material-icons custom"> ความสว่าง _4 </i>	ความสว่าง _4
<i class = "material-icons custom"> ความสว่าง _5 </i>	ความสว่าง _5
<i class = "material-icons custom"> ความสว่าง _6 </i>	ความสว่าง _6
<i class = "material-icons custom"> ความสว่าง _7 </i>	ความสว่าง _7
<i class = "material-icons custom"> broken_image </i>	Broken_image
<i class = "material-icons custom"> แปรง </i>	แปรง
<i class = "material-icons custom"> กล้องถ่ายรูป </i>	กล้อง
<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>	camera_roll
<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"> คอลเลกชัน </i>	คอลเลกชัน
<i class = "material-icons custom"> collections_bookmark </i>	collection_bookmark
<i class = "material-icons custom"> color_lens </i>	color_lens
<i class = "material-icons custom"> ปรับสี </i>	colorize
<i class = "material-icons custom"> เปรียบเทียบ </i>	เปรียบเทียบ
<i class = "material-icons custom"> control_point </i>	control_point
<i class = "material-icons custom"> control_point_duplicate </i>	control_point_duplicate
<i class = "material-icons custom"> ครอบตัด </i>	ครอบตัด
<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"> รายละเอียด </i>	รายละเอียด
<i class = "material-icons custom"> แก้ไข </i>	แก้ไข
<i class = "material-icons custom"> การเปิดเผย </i>	การรับสัมผัสเชื้อ
<i class = "material-icons custom"> exposure_neg_1 </i>	Exposure_neg_1
<i class = "material-icons custom"> exposure_plus_1 </i>	Exposure_plus_1
<i class = "material-icons custom"> exposure_plus_2 </i>	Exposure_plus_2
<i class = "material-icons custom"> Exposure_zero </i>	Exposure_zero
<i class = "material-icons custom"> ตัวกรอง </i>	กรอง
<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"> flare </i>	เปลวไฟ
<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"> พลิก </i>	พลิก
<i class = "material-icons custom"> ไล่ระดับสี </i>	ไล่ระดับสี
<i class = "material-icons custom"> เกรน </i>	เมล็ดข้าว
<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"> การรักษา </i>	การรักษา
<i class = "material-icons custom"> รูปภาพ </i>	ภาพ
<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"> แนวนอน </i>	ภูมิทัศน์
<i class = "material-icons custom"> leak_add </i>	รั่ว _ แอด
<i class = "material-icons custom"> leak_remove </i>	รั่ว _remove
<i class = "material-icons custom"> เลนส์ </i>	เลนส์
<i class = "material-icons custom"> ดู </i>	ดู
<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>	looks_5
<i class = "material-icons custom"> looks_6 </i>	looks_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"> loupe </i>	บานเกล็ด
<i class = "material-icons custom"> ขาวดำ _ รูปถ่าย </i>	ภาพขาวดำ
<i class = "material-icons custom"> movie_creation </i>	movie_creation
<i class = "material-icons custom"> music_note </i>	โน้ตเพลง
<i class = "material-icons custom"> ธรรมชาติ </i>	ธรรมชาติ
<i class = "material-icons custom"> nature_people </i>	ธรรมชาติ _ คน
<i class = "material-icons custom"> wb_sunny </i>	wb_sunny
<i class = "material-icons custom"> navigation_next </i>	nav_next
<i class = "material-icons custom"> navigation_before </i>	nav_before
<i class = "material-icons custom"> จานสี </i>	จานสี
<i class = "material-icons custom"> พาโนรามา </i>	พาโนรามา
<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"> รูปภาพ </i>	รูปถ่าย
<i class = "material-icons custom"> photo_album </i>	อัลบั้มรูป
<i class = "material-icons custom"> photo_camera </i>	กล่องถ่ายรูป
<i class = "material-icons custom"> photo_library </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"> แนวตั้ง </i>	แนวตั้ง
<i class = "material-icons custom"> remove_red_eye </i>	remove_red_eye
<i class = "material-icons custom"> rot_90_degrees_ccw </i>	rot_90_degrees_ccw
<i class = "material-icons custom"> rot_left </i>	หมุนซ้าย
<i class = "material-icons custom"> rot_right </i>	หมุนขวา
<i class = "material-icons custom"> สไลด์โชว์ </i>	สไลด์โชว์
<i class = "material-icons custom"> ทำให้ตรง </i>	ยืด
<i class = "material-icons custom"> สไตล์ </i>	สไตล์
<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"> พื้นผิว </i>	เนื้อ
<i class = "material-icons custom"> ไทม์แลปส์ </i>	เวลาที่ล่วงเลย
<i class = "material-icons custom"> ตัวจับเวลา </i>	จับเวลา
<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>	หมดเวลา
<i class = "material-icons custom"> โทนเสียง </i>	โทนเสียง
<i class = "material-icons custom"> transform </i>	แปลง
<i class = "material-icons custom"> ปรับแต่ง </i>	ปรับแต่ง
<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"> วิกเน็ตต์ </i>	บทความสั้น ๆ
<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

บทนี้อธิบายการใช้งานไอคอนแผนที่ (วัสดุ) ของ 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> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "material-icons custom"> อยู่ที่นี่ </i>	อยู่ที่ไหน
<i class = "material-icons custom"> ทิศทาง </i>	ทิศทาง
<i class = "material-icons custom"> directions_bike </i>	Directions_bike
<i class = "material-icons custom"> directions_boat </i>	Directions_boat
<i class = "material-icons custom"> directions_bus </i>	Directions_bus
<i class = "material-icons custom"> directions_car </i>	Directions_car
<i class = "material-icons custom"> directions_railway </i>	directions_railway
<i class = "material-icons custom"> directions_run </i>	Directions_run
<i class = "material-icons custom"> directions_subway </i>	Directions_subway
<i class = "material-icons custom"> directions_transit </i>	Directions_transit
<i class = "material-icons custom"> directions_walk </i>	directions_walk
<i class = "material-icons custom"> เที่ยวบิน </i>	เที่ยวบิน
<i class = "material-icons custom"> โรงแรม </i>	โรงแรม
<i class = "material-icons custom"> เลเยอร์ </i>	ชั้น
<i class = "material-icons custom"> layer_clear </i>	Layer_clear
<i class = "material-icons custom"> local_activity </i>	local_activity
<i class = "material-icons custom"> local_airport </i>	local_airport
<i class = "material-icons custom"> local_atm </i>	local_atm
<i class = "material-icons custom"> local_bar </i>	local_bar
<i class = "material-icons custom"> local_cafe </i>	local_cafe
<i class = "material-icons custom"> local_car_wash </i>	local_car_wash
<i class = "material-icons custom"> local_convenience_store </i>	local_convenience_store
<i class="material-icons custom">local_dining</i>	local_dining
<i class="material-icons custom">local_drink</i>	local_drink
<i class="material-icons custom">local_florist</i>	local_florist
<i class="material-icons custom">local_gas_station</i>	local_gas_station
<i class="material-icons custom">local_grocery_store</i>	local_grocery_store
<i class="material-icons custom">local_hospital</i>	local_hospital
<i class="material-icons custom">local_hotel</i>	local_hotel
<i class="material-icons custom">local_laundry_service</i>	local_laundry_service
<i class="material-icons custom">local_library</i>	local_library
<i class="material-icons custom">local_mall</i>	local_mall
<i class="material-icons custom">local_movies</i>	local_movies
<i class="material-icons custom">local_offer</i>	local_offer
<i class="material-icons custom">local_parking</i>	local_parking
<i class="material-icons custom">local_pharmacy</i>	local_pharmacy
<i class="material-icons custom">local_phone</i>	local_phone
<i class="material-icons custom">local_pizza</i>	local_pizza
<i class="material-icons custom">local_play</i>	local_play
<i class="material-icons custom">local_post_office</i>	local_post_office
<i class="material-icons custom">local_printshop</i>	local_printshop
<i class="material-icons custom">local_see</i>	local_see
<i class="material-icons custom">local_shipping</i>	local_shipping
<i class="material-icons custom">local_taxi</i>	local_taxi
<i class="material-icons custom">map</i>	map
<i class="material-icons custom">my_location</i>	my_location
<i class="material-icons custom">navigation</i>	navigation
<i class="material-icons custom">person_pin</i>	person_pin
<i class="material-icons custom">pin_drop</i>	pin_drop
<i class="material-icons custom">place</i>	place
<i class="material-icons custom">rate_review</i>	rate_review
<i class="material-icons custom">restaurant_menu</i>	restaurant_menu
<i class="material-icons custom">satellite</i>	satellite
<i class="material-icons custom">store_mall_directory</i>	store_mall_directory
<i class="material-icons custom">traffic</i>	traffic
<i class="material-icons custom">terrain</i>	terrain

This chapter explains the usage of Google's (Material) Navigation 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>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Navigation 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="material-icons custom">apps</i>	apps
<i class="material-icons custom">arrow_back</i>	arrow_back
<i class="material-icons custom">arrow_drop_down</i>	arrow_drop_down
<i class="material-icons custom">arrow_drop_down_circle</i>	arrow_drop_down_circle
<i class="material-icons custom">arrow_drop_up</i>	arrow_drop_up
<i class="material-icons custom">arrow_forward</i>	arrow_forward
<i class="material-icons custom">cancel</i>	cancel
<i class="material-icons custom">check</i>	check
<i class="material-icons custom">chevron_left</i>	chevron_left
<i class="material-icons custom">chevron_right</i>	chevron_right
<i class="material-icons custom">close</i>	close
<i class="material-icons custom">expand_less</i>	expand_less
<i class="material-icons custom">expand_more</i>	expand_more
<i class="material-icons custom">fullscreen</i>	fullscreen
<i class="material-icons custom">fullscreen_exit</i>	fullscreen_exit
<i class="material-icons custom">menu</i>	menu
<i class="material-icons custom">more_horiz</i>	more_horiz
<i class="material-icons custom">more_vert</i>	more_vert
<i class="material-icons custom">refresh</i>	refresh

This chapter explains the usage of Google's (Material) Notification 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>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Notification 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="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

บทนี้จะอธิบายการใช้งานไอคอนโซเชียล (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"> กลุ่ม </i>	กลุ่ม
<i class = "material-icons custom"> group_add </i>	group_add
<i class = "material-icons custom"> location_city </i>	location_city
<i class = "material-icons custom"> อารมณ์ </i>	อารมณ์
<i class = "material-icons custom"> mood_bad </i>	mood_bad
<i class = "material-icons custom"> การแจ้งเตือน </i>	การแจ้งเตือน
<i class = "material-icons custom"> notification_active </i>	Notification_active
<i class = "material-icons custom"> notification_none </i>	Notification_none
<i class = "material-icons custom"> notification_off </i>	Notification_off
<i class = "material-icons custom"> notification_paused </i>	Notification_paused
<i class = "material-icons custom"> เพจ </i>	หน้า
<i class = "material-icons custom"> party_mode </i>	party_mode
<i class = "material-icons custom"> คน </i>	คน
<i class = "material-icons custom"> people_outline </i>	people_outline
<i class = "material-icons custom"> บุคคล </i>	คน
<i class = "material-icons custom"> person_add </i>	person_add
<i class = "material-icons custom"> person_outline </i>	person_outline
<i class = "material-icons custom"> plus_one </i>	บวกหนึ่ง
<i class = "material-icons custom"> แบบสำรวจ </i>	แบบสำรวจ
<i class = "material-icons custom"> สาธารณะ </i>	สาธารณะ
<i class = "material-icons custom"> โรงเรียน </i>	โรงเรียน
<i class = "material-icons custom"> แชร์ </i>	แบ่งปัน
<i class = "material-icons custom"> whatshot </i>	whatshot

บทนี้จะอธิบายการใช้งานไอคอนสลับ (วัสดุ) ของ 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>

ตารางต่อไปนี้มีการใช้งานและผลลัพธ์ของไอคอน Toggle (วัสดุ) ของ Google แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "material-icons custom"> ช่องทำเครื่องหมาย </i>	check_box
<i class = "material-icons custom"> check_box_outline_blank </i>	check_box_outline_blank
<i class = "material-icons custom"> indeterminate_check_box </i>	indeterminate_check_box
<i class = "material-icons custom"> radio_button_checked </i>	radio_button_checked
<i class = "material-icons custom"> radio_button_unchecked </i>	radio_button_unchecked
<i class = "material-icons custom"> star </i>	ดาว
<i class = "material-icons custom"> star_border </i>	star_border
<i class = "material-icons custom"> star_half </i>	star_half

นี่คือไลบรารีของไอคอนสีเดียวที่มีอยู่ในรูปแบบภาพแรสเตอร์รูปแบบภาพเวกเตอร์และแบบอักษร มีร่ายมนตร์มากกว่า 250 แบบในรูปแบบอักษร คุณสามารถใช้แบบอักษรเหล่านี้ในโครงการเว็บของคุณ ร่ายมนตร์เหล่านี้ไม่ฟรีอย่างไรก็ตามหากคุณไม่ต้องใช้จ่ายอะไรเลยในกรณีที่คุณใช้ในโครงการที่ใช้ Bootstrap

การโหลดฟอนต์ (ไลบรารี)

ในการโหลดไลบรารี Bootstrap Glyphicons ให้คัดลอกและวางบรรทัดต่อไปนี้ในส่วน <head> ของเว็บเพจ

<head>
   <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

การใช้ไอคอน

Bootstrap Glyphicons มีไอคอนมากมาย เลือกหนึ่งในนั้นและเพิ่มชื่อของคลาสไอคอนให้กับองค์ประกอบ HTML ใด ๆ ภายในแท็ก <body> ในตัวอย่างต่อไปนี้เราได้ใช้ไอคอนของต้นไม้และชื่อคลาสคือtree-deciduous.

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous"> </i>
   </body>
</html>

มันจะสร้างผลลัพธ์ต่อไปนี้ -

การกำหนดขนาด

คุณสามารถเพิ่มหรือลดขนาดของไอคอนได้โดยกำหนดขนาดใน CSS และใช้ร่วมกับชื่อคลาสดังที่แสดงด้านล่าง ในตัวอย่างต่อไปนี้เราได้กำหนดขนาดเป็น 6 em

<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>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

มันจะสร้างผลลัพธ์ต่อไปนี้:

การกำหนดสี

คุณสามารถกำหนดสีของไอคอนโดยใช้ CSS ตัวอย่างต่อไปนี้แสดงวิธีเปลี่ยนสีของไอคอนต้นไม้

<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>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

มันจะสร้างผลลัพธ์ต่อไปนี้ -

บทนี้อธิบายการใช้งาน Bootstrap Glyphicons (Components) สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      
      <i.custom {font-size: 2em; color: blue;}>
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous custom"></i>
   </body>
	
</html>

ตารางต่อไปนี้ประกอบด้วยการใช้งานและผลลัพธ์ของ Bootstrap Glyphicons (ส่วนประกอบ) แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "glyphicon glyphicon-asterisk กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-plus custom"> </i>
<i class = "glyphicon glyphicon-euro custom"> </i>
<i class = "glyphicon glyphicon-minus custom"> </i>
<i class = "glyphicon glyphicon-cloud custom"> </i>
<i class = "glyphicon glyphicon-ซองกำหนดเอง"> </i>
<i class = "glyphicon glyphicon-pencil custom"> </i>
<i class = "glyphicon glyphicon-glass custom"> </i>
<i class = "glyphicon glyphicon-music custom"> </i>
<i class = "glyphicon glyphicon-search custom"> </i>
<i class = "glyphicon glyphicon-heart custom"> </i>
<i class = "glyphicon glyphicon-star custom"> </i>
<i class = "glyphicon glyphicon-star-empty custom"> </i>
<i class = "glyphicon glyphicon-user custom"> </i>
<i class = "glyphicon glyphicon-film custom"> </i>
<i class = "glyphicon glyphicon-th-large custom"> </i>
<i class = "glyphicon glyphicon-th custom"> </i>
<i class = "glyphicon glyphicon-th-list custom"> </i>
<i class = "glyphicon glyphicon-ok custom"> </i>
<i class = "glyphicon glyphicon-remove custom"> </i>
<i class = "glyphicon glyphicon-zoom-in กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-zoom-out custom"> </i>
<i class = "glyphicon glyphicon-off custom"> </i>
<i class = "glyphicon glyphicon-signal custom"> </i>
<i class = "glyphicon glyphicon-cog กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-trash custom"> </i>
<i class = "glyphicon glyphicon-home custom"> </i>
<i class = "glyphicon glyphicon-file custom"> </i>
<i class = "glyphicon glyphicon-time custom"> </i>
<i class = "glyphicon glyphicon-road custom"> </i>
<i class = "glyphicon glyphicon-download-alt กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-download custom"> </i>
<i class = "glyphicon glyphicon-upload custom"> </i>
<i class = "glyphicon glyphicon-inbox custom"> </i>
<i class = "glyphicon glyphicon-play-circle custom"> </i>
<i class = "glyphicon glyphicon-repeat custom"> </i>
<i class = "glyphicon glyphicon-refresh custom"> </i>
<i class = "glyphicon glyphicon-list-alt กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-lock custom"> </i>
<i class = "glyphicon glyphicon-flag กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-headphones custom"> </i>
<i class = "glyphicon glyphicon-volume-off custom"> </i>
<i class = "glyphicon glyphicon-volume-down custom"> </i>
<i class = "glyphicon glyphicon-volume-up custom"> </i>
<i class = "glyphicon glyphicon-qrcode กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-barcode กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-tag custom"> </i>
<i class = "glyphicon glyphicon-tags custom"> </i>
<i class = "glyphicon glyphicon-book custom"> </i>
<i class = "glyphicon glyphicon-bookmark custom"> </i>
<i class = "glyphicon glyphicon-print custom"> </i>
<i class = "glyphicon glyphicon-camera custom"> </i>
<i class = "glyphicon glyphicon-font custom"> </i>
<i class = "glyphicon glyphicon-bold custom"> </i>
<i class = "glyphicon glyphicon-italic custom"> </i>
<i class = "glyphicon glyphicon-text-height กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-text-width กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-align-left custom"> </i>
<i class = "glyphicon glyphicon-align-center custom"> </i>
<i class = "glyphicon glyphicon-align-right custom"> </i>
<i class = "glyphicon glyphicon-align-justify custom"> </i>
<i class = "glyphicon glyphicon-list custom"> </i>
<i class = "glyphicon glyphicon-indent-left custom"> </i>
<i class = "glyphicon glyphicon-indent-right custom"> </i>
<i class = "glyphicon glyphicon-facetime-video กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-picture custom"> </i>
<i class = "glyphicon glyphicon-map-marker กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-adjustment custom"> </i>
<i class = "glyphicon glyphicon-tint custom"> </i>
<i class = "glyphicon glyphicon-edit custom"> </i>
<i class = "glyphicon glyphicon-share custom"> </i>
<i class = "glyphicon glyphicon-check custom"> </i>
<i class = "glyphicon glyphicon-move custom"> </i>
<i class = "glyphicon glyphicon-step-backward custom"> </i>
<i class = "glyphicon glyphicon-fast-backward custom"> </i>
<i class = "glyphicon glyphicon-backward custom"> </i>
<i class = "glyphicon glyphicon-play custom"> </i>
<i class = "glyphicon glyphicon-pause custom"> </i>
<i class = "glyphicon glyphicon-stop custom"> </i>
<i class = "glyphicon glyphicon-forward custom"> </i>
<i class = "glyphicon glyphicon-fast-forward custom"> </i>
<i class = "glyphicon glyphicon-step-forward custom"> </i>
<i class = "glyphicon glyphicon-eject custom"> </i>
<i class = "glyphicon glyphicon-chevron-left กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-chevron-right custom"> </i>
<i class = "glyphicon glyphicon-plus-sign กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-minus-sign กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-remove-sign กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-ok-sign กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-question-sign custom"> </i>
<i class = "glyphicon glyphicon-info-sign custom"> </i>
<i class = "glyphicon glyphicon-screenshot custom"> </i>
<i class = "glyphicon glyphicon-remove-circle custom"> </i>
<i class = "glyphicon glyphicon-ok-circle กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-ban-circle กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-arrow-left กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-arrow-right custom"> </i>
<i class = "glyphicon glyphicon-arrow-up custom"> </i>
<i class = "glyphicon glyphicon-arrow-down custom"> </i>
<i class = "glyphicon glyphicon-share-alt กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-resize-full custom"> </i>
<i class = "glyphicon glyphicon-resize-small custom"> </i>
<i class = "glyphicon glyphicon-exclamation-sign custom"> </i>
<i class = "glyphicon glyphicon-gift custom"> </i>
<i class = "glyphicon glyphicon-leaf custom"> </i>
<i class = "glyphicon glyphicon-fire custom"> </i>
<i class = "glyphicon glyphicon-eye-open custom"> </i>
<i class = "glyphicon glyphicon-eye-close custom"> </i>
<i class = "glyphicon glyphicon-warning-sign custom"> </i>
<i class = "glyphicon glyphicon-plane custom"> </i>
<i class = "glyphicon glyphicon-calendar custom"> </i>
<i class = "glyphicon glyphicon-random custom"> </i>
<i class = "glyphicon glyphicon-comment custom"> </i>
<i class = "glyphicon glyphicon-magnet custom"> </i>
<i class = "glyphicon glyphicon-chevron-up custom"> </i>
<i class = "glyphicon glyphicon-chevron-down custom"> </i>
<i class = "glyphicon glyphicon-retweet custom"> </i>
<i class = "glyphicon glyphicon-shopping-cart custom"> </i>
<i class = "glyphicon glyphicon-folder-close custom"> </i>
<i class = "glyphicon glyphicon-folder-open custom"> </i>
<i class = "glyphicon glyphicon-resize-vertical กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-resize-horizontal custom"> </i>
<i class = "glyphicon glyphicon-hdd กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-bullhorn custom"> </i>
<i class = "glyphicon glyphicon-bell custom"> </i>
<i class = "glyphicon glyphicon-certificate custom"> </i>
<i class = "glyphicon glyphicon-thumbs-up custom"> </i>
<i class = "glyphicon glyphicon-thumbs-down custom"> </i>
<i class = "glyphicon glyphicon-hand-right custom"> </i>
<i class = "glyphicon glyphicon-hand-left custom"> </i>
<i class = "glyphicon glyphicon-hand-up custom"> </i>
<i class = "glyphicon glyphicon-hand-down custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-right custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-left กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-circle-arrow-up custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-down custom"> </i>
<i class = "glyphicon glyphicon-global custom"> </i>
<i class = "glyphicon glyphicon-wrench custom"> </i>
<i class = "glyphicon glyphicon-task custom"> </i>
<i class = "glyphicon glyphicon-filter custom"> </i>
<i class = "glyphicon glyphicon-briefcase custom"> </i>
<i class = "glyphicon glyphicon-fullscreen custom"> </i>
<i class = "glyphicon glyphicon-dashboard custom"> </i>
<i class = "glyphicon glyphicon-paperclip กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-heart-empty custom"> </i>
<i class = "glyphicon glyphicon-link custom"> </i>
<i class = "glyphicon glyphicon-phone custom"> </i>
<i class = "glyphicon glyphicon-pushpin custom"> </i>
<i class = "glyphicon glyphicon-usd กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-gbp custom"> </i>
<i class = "glyphicon glyphicon-sort custom"> </i>
<i class = "glyphicon glyphicon-sort-by-alphabet custom"> </i>
<i class = "glyphicon glyphicon-sort-by-alphabet-alt กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-sort-by-order custom"> </i>
<i class = "glyphicon glyphicon-sort-by-order-alt กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-sort-by-attributes custom"> </i>
<i class = "glyphicon glyphicon-sort-by-attributes-alt กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-unchecked custom"> </i>
<i class = "glyphicon glyphicon-expand custom"> </i>
<i class = "glyphicon glyphicon-fold-down custom"> </i>
<i class = "glyphicon glyphicon-collision-up custom"> </i>
<i class = "glyphicon glyphicon-log-in custom"> </i>
<i class = "glyphicon glyphicon-flash กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-log-out custom"> </i>
<i class = "glyphicon glyphicon-new-window custom"> </i>
<i class = "glyphicon glyphicon-record custom"> </i>
<i class = "glyphicon glyphicon-save custom"> </i>
<i class = "glyphicon glyphicon-open custom"> </i>
<i class = "กำหนดเองที่บันทึก glyphicon glyphicon"> </i>
<i class = "glyphicon glyphicon-import custom"> </i>
<i class = "glyphicon glyphicon-export custom"> </i>
<i class = "glyphicon glyphicon-send กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-floppy-disk กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-floppy-saved custom"> </i>
<i class = "glyphicon glyphicon-floppy-remove custom"> </i>
<i class = "glyphicon glyphicon-floppy-save custom"> </i>
<i class = "glyphicon glyphicon-floppy-open custom"> </i>
<i class = "glyphicon glyphicon-credit-card custom"> </i>
<i class = "glyphicon glyphicon-transfer custom"> </i>
<i class = "glyphicon glyphicon-cutlery custom"> </i>
<i class = "glyphicon glyphicon-header custom"> </i>
<i class = "glyphicon glyphicon-compression custom"> </i>
<i class = "glyphicon glyphicon-earphone custom"> </i>
<i class = "glyphicon glyphicon-phone custom"> </i>
<i class = "glyphicon glyphicon-tower custom"> </i>
<i class = "glyphicon glyphicon-stats custom"> </i>
<i class = "glyphicon glyphicon-sd-video กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-hd-video กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-subtitles custom"> </i>
<i class = "glyphicon glyphicon-sound-stereo custom"> </i>
<i class = "glyphicon glyphicon-sound-dolby กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-sound-5-1 กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-sound-6-1 กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-sound-7-1 กำหนดเอง"> </i>
<i class = "glyphicon glyphicon-copyright-mark custom"> </i>
<i class = "glyphicon glyphicon-registration-mark custom"> </i>
<i class = "glyphicon glyphicon-cloud-download แบบกำหนดเอง"> </i>
<i class = "glyphicon glyphicon-cloud-upload custom"> </i>
<i class = "glyphicon glyphicon-tree-conifer custom"> </i>
<i class = "glyphicon glyphicon-tree-deciduous custom"> </i>