Ikon Web - Panduan Cepat

Ikon adalah simbol yang digunakan untuk mewakili tindakan atau kemampuan tertentu pada halaman web. Ikon digunakan dalam dokumen serta aplikasi dan dapat juga dipilih atau tidak. Misalnya, gambar yang kita lihat di tombol aplikasi semuanya ikon dan tombol ini dapat dipilih. Demikian pula, saat kita menggunakan ikon sebagai logo perusahaan, biasanya tidak dapat dipilih.

Di lingkungan Windows, jika kita mematikan volume sistem, itu akan diwakili dengan bantuan ikon, seperti yang ditunjukkan di bawah ini.

Menggunakan ikon web, kita dapat mewakili halaman pemuatan, opsi nonaktif, tautan, pengalihan, dll. Ikon ini dapat dibalik, diputar, diubah ukurannya, dibatasi, dibalik, dan diwarnai.

Font Ikon

Ikon Font berisi simbol dan mesin terbang. Setelah Anda memuat font yang diinginkan, Anda dapat menggunakan salah satu ikon yang disediakan oleh font tersebut menggunakan nama kelas ikon. Kami juga dapat menerapkan warna berbeda ke ikon dan mengubah ukurannya menggunakan properti CSS. Ada beberapa perpustakaan ikon (font) yang menyediakan ikon. Tutorial ini berfokus pada tiga font utama, yaitu -

Font Luar Biasa
Mesin terbang bootstrap
Ikon Material Google

Font Luar Biasa

Font ini menyediakan 519 ikon vektor skalabel gratis. Perpustakaan ini sepenuhnya gratis, baik untuk penggunaan pribadi maupun komersial. Ikon-ikon ini dapat disesuaikan dengan mudah. Awalnya, mereka dikembangkan untuk Bootstrap.

Mesin terbang bootstrap

Ini adalah pustaka ikon monokromatik yang tersedia dalam format gambar raster, format gambar vektor, dan sebagai font. Ini menyediakan lebih dari 250 mesin terbang dalam format font. Anda dapat menggunakan font ini di proyek web Anda. Ikon-ikon ini tidak gratis, namun Anda dapat menggunakannya dalam proyek berbasis Bootstrap tanpa harus membelinya.

Ikon Material Google

Google menyediakan sekitar 750 ikon yang dirancang menurut "pedoman desain material" dan ini dikenal sebagai Material Designikon. Ikon ini sederhana dan mendukung semua browser web modern. Karena ikon-ikon ini berbasis vektor, mereka juga dapat diskalakan. Untuk menggunakan ikon ini, kita harus memuat font (perpustakaan)material-icons.

Pustaka ikon Font Awesome menyediakan 519 ikon vektor skalabel gratis. Perpustakaan ini sepenuhnya gratis untuk penggunaan pribadi dan komersial. Awalnya dirancang untuk Bootstrap, ikon ini dapat disesuaikan dengan mudah.

Memuat Perpustakaan Font

Untuk memuat pustaka Font Awesome, salin dan tempel baris berikut di bagian <head> halaman web.

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

Menggunakan Ikon

Font Awesome menyediakan beberapa ikon. Pilih salah satunya dan tambahkan nama kelas ikon ke elemen HTML mana pun di dalam tag <body>. Dalam contoh berikut, kami telah menggunakan ikon mata uang India.

<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>

Ini akan menghasilkan keluaran sebagai berikut -

Mendefinisikan Ukuran

Anda dapat menambah atau mengurangi ukuran ikon dengan menentukan ukurannya menggunakan CSS dan menggunakannya bersama dengan nama kelas, seperti yang ditunjukkan di bawah ini. Dalam contoh yang diberikan, kami telah menyatakan ukurannya sebagai 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>

Ini akan menghasilkan keluaran sebagai berikut -

Mendefinisikan Warna

Sama seperti ukuran, Anda dapat menentukan warna ikon menggunakan CSS. Contoh berikut menunjukkan bagaimana mengubah warna ikon mata uang India.

<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>

Daftar Kategori

Font Awesome menyediakan 519 ikon dalam kategori berikut -

Ikon Aplikasi Web
Ikon Tangan
Ikon Transportasi
Ikon Gender
Ikon Jenis File
Ikon Pemintal
Ikon Kontrol Formulir
Ikon Pembayaran
Ikon Bagan
Ikon Mata Uang
Ikon editor teks
Ikon Arah
Ikon Pemutar Video
Ikon Merek

Untuk menggunakan salah satu dari ikon ini, Anda harus mengganti nama kelas dalam program yang diberikan dalam bab ini dengan nama kelas dari ikon yang diinginkan. Dalam bab-bab mendatang dari Unit ini (Font Awesome), kami telah menjelaskan berdasarkan kategori penggunaan dan output masing-masing dari berbagai ikon Font Awesome.

Bab ini menjelaskan penggunaan ikon Font Awesome Web Application. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut menunjukkan penggunaan dan hasil dari ikon Font Awesome Web Application. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "fa fa-adjust custom"> </i>
<i class = "fa fa-anchor custom"> </i>
<i class = "fa fa-archive custom"> </i>
<i class = "fa-area-chart custom"> </i>
<i class = "fa fa-arrows custom"> </i>
<i class = "fa fa-arrows-h custom"> </i>
<i class = "fa fa-arrows-v custom"> </i>
<i class = "fa fa-asterisk custom"> </i>
<i class = "fa fa-at custom"> </i>
<i class = "fa fa-automotive 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 custom"> </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 custom"> </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-quarter 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 custom"> </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 custom"> </i>
<i class = "fa fa-calendar-minus-o custom"> </i>
<i class = "fa fa-calendar-o custom"> </i>
<i class = "fa fa-calendar-plus-o custom"> </i>
<i class = "fa fa-calendar-times-o custom"> </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 custom"> </i>
<i class = "fa fa-caret-square-o-down kustom"> </i>
<i class = "fa fa-caret-square-o-left custom"> </i>
<i class = "fa fa-caret-square-o-right custom"> </i>
<i class = "fa fa-caret-square-o-up custom"> </i>
<i class = "fa fa-cart-arrow-down kustom"> </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 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 custom"> </i>
<i class = "fa fa-circle-thin custom"> </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-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-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-cubes custom"> </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 custom"> </i>
<i class = "fa fa-download custom"> </i>
<i class = "fa fa-edit custom"> </i>
<i class = "fa fa-ellipsis-h custom"> </i>
<i class = "fa fa-ellipsis-v custom"> </i>
<i class = "fa fa-envelope custom"> </i>
<i class = "fa fa-envelope-o custom"> </i>
<i class = "fa fa-envelope-square custom"> </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 custom"> </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 custom"> </i>
<i class = "fa fa-file-audio-o custom"> </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 custom"> </i>
<i class = "fa fa-file-pdf-o custom"> </i>
<i class = "fa fa-file-photo-o custom"> </i>
<i class = "fa fa-file-picture-o custom"> </i>
<i class = "fa fa-file-powerpoint-o custom"> </i>
<i class = "fa fa-file-sound-o custom"> </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 custom"> </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 custom"> </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-extinguisher custom"> </i>
<i class = "fa fa-flag custom"> </i>
<i class = "fa fa-flag-checkered custom"> </i>
<i class = "fa fa-flag-o custom"> </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-gears custom"> </i>
<i class = "fa fa-gift custom"> </i>
<i class = "fa fa-glass custom"> </i>
<i class = "fa fa-globe 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 custom"> </i>
<i class = "fa fa-hand-rock-o custom"> </i>
<i class = "fa fa-hand-scissors-o custom"> </i>
<i class = "fa fa-hand-spock-o custom"> </i>
<i class = "fa fa-hand-paper-o custom"> </i>
<i class = "fa fa-hdd-o custom"> </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 fa-hourglass-half custom"> </i>
<i class = "fa 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-institusi custom"> </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 custom"> </i>
<i class = "fa fa-map-o custom"> </i>
<i class = "fa fa-map-pin custom"> </i>
<i class = "fa fa-map-sign custom"> </i>
<i class = "fa fa-meh-o custom"> </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 custom"> </i>
<i class = "fa fa-mobile custom"> </i>
<i class = "fa fa-money custom"> </i>
<i class = "fa fa-moon-o custom"> </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 custom"> </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 custom"> </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 custom"> </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 custom"> </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 custom"> </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 fa-registered 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 custom"> </i>
<i class = "fa fa-share-alt-o custom"> </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 custom"> </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 custom"> </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 custom"> </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 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 kustom"> </i>
<i class = "fa fa-toggle-left custom"> </i>
<i class = "fa fa-toggle-off custom"> </i>
<i class = "fa fa-toggle-on kustom"> </i>
<i class = "fa fa-toggle-right custom"> </i>
<i class = "fa fa-toggle-up custom"> </i>
<i class = "fa fa-trademark 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 custom"> </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 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>

Bab ini menjelaskan penggunaan ikon Font Awesome Hand. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut menunjukkan penggunaan dan hasil dari ikon Font Awesome Hand. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "fa fa-hand-rock-o custom"> </i>
<i class = "fa fa-hand-o-left custom"> </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 fa-thumbs-o-up custom"> </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-scissors-o custom"> </i>
<i class = "fa 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 custom"> </i>
<i class = "fa fa-hand-spock-o custom"> </i>
<i class = "fa fa-thumbs-o-down kustom"> </i>

Bab ini menjelaskan penggunaan ikon Font Awesome Transportation. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut menunjukkan penggunaan dan hasil dari ikon Font Awesome Transportation. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "fa fa-ambulance custom"> </i>
<i class = "fa fa-automotive 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>

Bab ini menjelaskan penggunaan ikon Font Awesome Gender. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut menunjukkan penggunaan dan hasil dari ikon Font Awesome Gender. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "fa fa-genderless custom"> </i>
<i class = "fa fa-intersex custom"> </i>
<i class = "fa fa-mars custom"> </i>
<i class = "fa fa-mars-double custom"> </i>
<i class = "fa fa-mars-stroke custom"> </i>
<i class = "fa fa-mars-stroke-h custom"> </i>
<i class = "fa fa-mars-stroke-v custom"> </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 custom"> </i>

Bab ini menjelaskan penggunaan ikon Jenis File Font Awesome. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut menunjukkan penggunaan dan hasil dari ikon Jenis File Font Awesome. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "fa fa-file custom"> </i>
<i class = "fa fa-file-archive-o custom"> </i>
<i class = "fa fa-file-audio-o custom"> </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 custom"> </i>
<i class = "fa fa-file-movie-o custom"> </i>
<i class = "fa fa-file-o custom"> </i>
<i class = "fa fa-file-pdf-o custom"> </i>
<i class = "fa fa-file-photo-o custom"> </i>
<i class = "fa fa-file-picture-o custom"> </i>
<i class = "fa fa-file-powerpoint-o custom"> </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 custom"> </i>
<i class = "fa fa-file-sound-o custom"> </i>
<i class = "fa fa-file-text custom"> </i>
<i class = "fa fa-file-text-o custom"> </i>

Bab ini menjelaskan penggunaan ikon Font Awesome Spinner. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut menunjukkan penggunaan dan hasil dari ikon Font Awesome Spinner. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "fa fa-circle-o-notch custom"> </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>

Bab ini menjelaskan penggunaan ikon Font Awesome Form Control. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut menunjukkan penggunaan dan hasil dari ikon Font Awesome Form Control. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<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 custom"> </i>
<i class = "fa fa-minus-square custom"> </i>
<i class = "fa fa-minus-square-o custom"> </i>
<i class = "fa fa-plus-square custom"> </i>
<i class = "fa fa-plus-square-o custom"> </i>
<i class = "fa fa-square custom"> </i>
<i class = "fa fa-square-o custom"> </i>

Bab ini menjelaskan penggunaan ikon Font Awesome Payment. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut menunjukkan penggunaan dan hasil dari ikon Font Awesome Payment. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "fa fa-cc-amex custom"> </i>
<i class = "fa fa-cc-diners-club custom"> </i>
<i class = "fa fa-cc-temukan kustom"> </i>
<i class = "fa fa-cc-jcb custom"> </i>
<i class = "fa fa-cc-mastercard custom"> </i>
<i class = "fa fa-cc-paypal custom"> </i>
<i class = "fa fa-cc-stripe custom"> </i>
<i class = "fa fa-cc-visa custom"> </i>
<i class = "fa-credit-card custom"> </i>

Bab ini menjelaskan penggunaan ikon Font Awesome Chart. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut menunjukkan penggunaan dan hasil dari ikon Font Awesome Chart. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "fa-area-chart custom"> </i>
<i class = "fa fa-bar-chart custom"> </i>
<i class = "fa fa-bar-chart-o custom"> </i>
<i class = "fa fa-line-chart custom"> </i>
<i class = "fa fa-pie-chart custom"> </i>

Bab ini menjelaskan penggunaan ikon Font Awesome Currency. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut menunjukkan penggunaan dan hasil ikon Font Awesome Currency. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<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 custom"> </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>

Bab ini menjelaskan penggunaan ikon Font Awesome Text Editor. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut menunjukkan penggunaan dan hasil dari ikon Font Awesome Text Editor. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<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 custom"> </i>
<i class = "fa fa-file-text custom"> </i>
<i class = "fa fa-file-text-o custom"> </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 custom"> </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-paragraph custom"> </i>
<i class = "fa fa-paste custom"> </i>
<i class = "fa fa-repeat custom"> </i>
<i class = "fa fa-rotate-left custom"> </i>
<i class = "fa fa-rotate-right custom"> </i>
<i class = "fa fa-save custom"> </i>
<i class = "fa fa-scissors custom"> </i>
<i class = "fa fa-strikethrough custom"> </i>
<i class = "fa fa-subscript custom"> </i>
<i class = "fa fa-table custom"> </i>
<i class = "fa fa-text-heigh custom"> </i>
<i class = "fa fa-text-width custom"> </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>

Bab ini menjelaskan penggunaan ikon Font Awesome Directional. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut menunjukkan penggunaan dan hasil ikon Font Awesome Directional. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "fa fa-angle-double-down custom"> </i>
<i class = "fa fa-angle-double-left custom"> </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 kustom"> </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 kustom"> </i>
<i class = "fa fa-arrow-circle-o-down kustom"> </i>
<i class = "fa fa-arrow-circle-o-left custom"> </i>
<i class = "fa fa-arrow-circle-o-right kustom"> </i>
<i class = "fa fa-arrow-circle-o-up kustom"> </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 custom"> </i>
<i class = "fa fa-arrows-h custom"> </i>
<i class = "fa fa-arrows-v custom"> </i>
<i class = "fa fa-caret-down custom"> </i>
<i class = "fa fa-caret-left custom"> </i>
<i class = "fa fa-caret-right custom"> </i>
<i class = "fa fa-caret-up custom"> </i>
<i class = "fa fa-caret-square-o-down kustom"> </i>
<i class = "fa fa-caret-square-o-left custom"> </i>
<i class = "fa fa-caret-square-o-right custom"> </i>
<i class = "fa fa-caret-square-o-up custom"> </i>
<i class = "fa fa-chevron-circle-down kustom"> </i>
<i class = "fa fa-chevron-circle-left custom"> </i>
<i class = "fa fa-chevron-circle-right custom"> </i>
<i class = "fa fa-chevron-circle-up kustom"> </i>
<i class = "fa fa-chevron-down custom"> </i>
<i class = "fa fa-chevron-left custom"> </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 custom"> </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 kustom"> </i>
<i class = "fa fa-long-arrow-left custom"> </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 kustom"> </i>
<i class = "fa fa-toggle-left custom"> </i>
<i class = "fa fa-toggle-right custom"> </i>
<i class = "fa fa-toggle-up custom"> </i>
<i class = "fa fa-exchange custom"> </i>

Bab ini menjelaskan penggunaan ikon Font Awesome Video Player. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut menunjukkan penggunaan dan hasil dari ikon Font Awesome Video Player. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Ikon
<i class = "fa fa-arrows-alt custom"> </i>
<i class = "fa fa-backward custom"> </i>
<i class = "fa fa-compress custom"> </i>
<i class = "fa 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>

Bab ini menjelaskan penggunaan ikon Font Awesome Brand. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut menunjukkan penggunaan dan hasil dari ikon Font Awesome Brand. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Ikon
<i class = "fa fa-500px custom"> </i>
<i class = "fa fa-amazon custom"> </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 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 custom"> </i>
<i class = "fa fa-cc-diners-club custom"> </i>
<i class = "fa fa-cc-temukan kustom"> </i>
<i class = "fa fa-cc-jcb custom"> </i>
<i class = "fa fa-cc-mastercard custom"> </i>
<i class = "fa fa-cc-paypal custom"> </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 custom"> </i>
<i class = "fa fa-dashcube custom"> </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 custom"> </i>
<i class = "fa fa-facebook-official custom"> </i>
<i class = "fa fa-facebook-square custom"> </i>
<i class = "fa fa-firefox custom"> </i>
<i class = "fa fa-flickr custom"> </i>
<i class = "fa fa-fonticons custom"> </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 custom"> </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 custom"> </i>
<i class = "fa fa-github custom"> </i>
<i class = "fa fa-github-alt custom"> </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 custom"> </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 custom"> </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 custom"> </i>
<i class = "fa fa-maxcdn custom"> </i>
<i class = "fa fa-meanpath custom"> </i>
<i class = "fa fa-medium custom"> </i>
<i class = "fa fa-odnoklassniki custom"> </i>
<i class = "fa 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 custom"> </i>
<i class = "fa fa-pied-piper-alt custom"> </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 custom"> </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 custom"> </i>
<i class = "fa fa-safari custom"> </i>
<i class = "fa fa-sellsy 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 custom"> </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 custom"> </i>
<i class = "fa fa-soundcloud custom"> </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 fa-stumbleupon-circle custom"> </i>
<i class = "fa fa-tencent-weibo custom"> </i>
<i class = "fa fa-trello custom"> </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 custom"> </i>
<i class = "fa fa-twitter custom"> </i>
<i class = "fa fa-twitter-square custom"> </i>
<i class = "fa fa-viacoin custom"> </i>
<i class = "fa fa-vimeo custom"> </i>
<i class = "fa fa-vimeo-square custom"> </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 custom"> </i>
<i class = "fa fa-weixin custom"> </i>
<i class = "fa fa-whatsapp custom"> </i>
<i class = "fa fa-wikipedia-w custom"> </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 custom"> </i>
<i class = "fa fa-y-combinator custom"> </i>
<i class = "fa fa-y-combinator-square custom"> </i>
<i class = "fa fa-yc custom"> </i>

Bab ini menjelaskan penggunaan ikon Font Awesome Medical. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut menunjukkan penggunaan dan hasil dari ikon Font Awesome Medical. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Ikon
<i class = "fa fa-ambulance custom"> </i>
<i class = "fa fa-h-square 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-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 menyediakan satu set 750 ikon yang dirancang di bawah "pedoman desain material" dan ini dikenal sebagai Material Designikon. Ikon ini sederhana dan mendukung semua browser web modern. Karena ikon-ikon ini berbasis vektor, mereka juga dapat diskalakan. Untuk menggunakan ikon ini, kita harus memuat font (perpustakaan)material-icons.

Memuat Font (perpustakaan)

Untuk memuat pustaka material-icons, salin dan tempel baris berikut di bagian <head> halaman web.

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

Menggunakan Ikon

Ikon Material Google menyediakan daftar panjang ikon. Pilih salah satunya dan tambahkan nama kelas ikon ke elemen HTML mana pun di dalam tag <body>. Dalam contoh berikut, kami telah menggunakan ikon bernamaaccessibility yang termasuk dalam kategori tindakan.

<!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>

Ini akan menghasilkan keluaran sebagai berikut -

Mendefinisikan Ukuran

Anda dapat menambah atau mengurangi ukuran ikon dengan menentukan ukurannya di CSS dan menggunakannya bersama dengan nama kelas seperti yang ditunjukkan di bawah ini. Pada contoh berikut, kami telah mendeklarasikan ukurannya sebagai 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>

Ini akan menghasilkan keluaran sebagai berikut -

Mendefinisikan Warna

Anda dapat menggunakan CSS untuk menentukan warna ikon. Contoh berikut menunjukkan bagaimana Anda dapat mengubah warna ikon yang disebutaccessibility.

<!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>

Ini akan menghasilkan keluaran sebagai berikut -

Daftar Kategori

Font Ikon Material Google menyediakan 519 ikon dalam kategori berikut -

Ikon Tindakan
Ikon Peringatan
Ikon AV
Ikon Komunikasi
Ikon Konten
Ikon Perangkat
Ikon Editor
Ikon File
Ikon Perangkat Keras
Ikon Gambar
Ikon Peta
Ikon Navigasi
Ikon Pemberitahuan
Ikon Sosial
Beralih Ikon

Untuk menggunakan salah satu dari ikon ini, Anda harus mengganti nama kelas dalam program yang diberikan dalam bab ini dengan nama kelas dari ikon yang diinginkan. Dalam bab-bab mendatang dari Unit ini (Ikon Material), kami telah menjelaskan berdasarkan kategori penggunaan dan keluaran masing-masing dari berbagai Ikon Material.

Bab ini menjelaskan penggunaan Ikon Tindakan (Material) Google. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<!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>

Tabel berikut berisi penggunaan dan hasil Ikon Tindakan (Material) Google. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "material-icons custom"> 3d_rotation </i>	3D_rotation
<i class = "material-icons custom"> aksesibilitas </i>	aksesibilitas
<i class = "material-icons custom"> keseimbangan_akun </i>	saldo rekening
<i class = "material-icons custom"> account_balance_wallet </i>	account_balance_wallet
<i class = "material-icons custom"> kotak_akun </i>	kotak_akun
<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"> alarm </i>	alarm
<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>	android
<i class = "material-icons custom"> pengumuman </i>	pengumuman
<i class = "material-icons custom"> rasio_spek </i>	aspek_rasio
<i class = "material-icons custom"> penilaian </i>	penilaian
<i class = "material-icons custom"> tugas </i>	tugas
<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"> perpanjangan otomatis </i>	Perbaharui Otomatis
<i class = "material-icons custom"> cadangan </i>	cadangan
<i class = "material-icons custom"> buku </i>	Book
<i class = "material-icons custom"> bookmark </i>	penanda buku
<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"> build </i>	membangun
<i class = "material-icons custom"> dalam cache </i>	dalam cache
<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>	Ubah Sejarah
<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"> kelas </i>	kelas
<i class = "material-icons custom"> kode </i>	kode
<i class = "material-icons custom"> credit_card </i>	kartu kredit
<i class = "material-icons custom"> dasbor </i>	dasbor
<i class = "material-icons custom"> hapus </i>	menghapus
<i class = "material-icons custom"> deskripsi </i>	deskripsi
<i class = "material-icons custom"> dns </i>	dns
<i class = "material-icons custom"> selesai </i>	selesai
<i class = "material-icons custom"> done_all </i>	selesai_semua
<i class = "material-icons custom"> keluarkan </i>	mengeluarkan
<i class = "material-icons custom"> acara </i>	peristiwa
<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"> jelajahi </i>	jelajahi
<i class = "material-icons custom"> ekstensi </i>	perpanjangan
<i class = "material-icons custom"> wajah </i>	wajah
<i class = "material-icons custom"> favorit </i>	favorit
<i class = "material-icons custom"> favorite_border </i>	favorite_border
<i class = "material-icons custom"> umpan balik </i>	umpan balik
<i class = "material-icons custom"> find_in_page </i>	Temukan dihalaman
<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"> kelas </i>	kelas
<i class = "material-icons custom"> group_work </i>	pekerjaan kelompok
<i class = "material-icons custom"> bantuan </i>	Tolong
<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"> riwayat </i>	sejarah
<i class = "material-icons custom"> rumah </i>	rumah
<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"> info </i>	info
<i class = "material-icons custom"> info_outline </i>	info_outline
<i class = "material-icons custom"> masukan </i>	memasukkan
<i class = "material-icons custom"> invert_colors </i>	invert_colors
<i class = "material-icons custom"> label </i>	label
<i class = "material-icons custom"> label_outline </i>	label_outline
<i class = "material-icons custom"> bahasa </i>	bahasa
<i class = "material-icons custom"> luncurkan </i>	meluncurkan
<i class = "material-icons custom"> daftar </i>	daftar
<i class = "material-icons custom"> kunci </i>	mengunci
<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"> loyalitas </i>	loyalitas
<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>	Buka di browser
<i class = "material-icons custom"> open_in_new </i>	open_in_new
<i class = "material-icons custom"> open_with </i>	Buka dengan
<i class = "material-icons custom"> tampilan halaman </i>	tampilan halaman
<i class = "material-icons custom"> pembayaran </i>	pembayaran
<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>	gambar di dalam gambar
<i class = "material-icons custom"> play_for_work </i>	play_for_work
<i class = "material-icons custom"> polimer </i>	polimer
<i class = "material-icons custom"> power_settings_new </i>	power_settings_new
<i class = "material-icons custom"> cetak </i>	mencetak
<i class = "material-icons custom"> query_builder </i>	query_builder
<i class = "material-icons custom"> question_answer </i>	question_answer
<i class = "material-icons custom"> tanda terima </i>	resi
<i class = "material-icons custom"> tebus </i>	menebus
<i class = "material-icons custom"> susun ulang </i>	menyusun ulang
<i class = "material-icons custom"> report_problem </i>	Laporkan masalah
<i class = "material-icons custom"> pulihkan </i>	mengembalikan
<i class = "material-icons custom"> ruangan </i>	kamar
<i class = "material-icons custom"> jadwal </i>	susunan acara
<i class = "material-icons custom"> penelusuran </i>	Cari
<i class = "material-icons custom"> pengaturan </i>	pengaturan
<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>	pengaturan_sel
<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"> toko </i>	toko
<i class = "material-icons custom"> shop_two </i>	shop_two
<i class = "material-icons custom"> shopping_basket </i>	Keranjang belanja
<i class = "material-icons custom"> shopping_cart </i>	kereta Belanja
<i class = "material-icons custom"> speaker_notes </i>	speaker_notes
<i class = "material-icons custom"> periksa ejaan </i>	cek ejaan
<i class = "material-icons custom"> star_rate </i>	star_rate
<i class = "material-icons custom"> bintang </i>	bintang
<i class = "material-icons custom"> menyimpan </i>	toko
<i class = "material-icons custom"> subjek </i>	subyek
<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"> tab </i>	tab
<i class = "material-icons custom"> tab_unselected </i>	tab_unselected
<i class = "material-icons custom"> teater </i>	teater
<i class = "material-icons custom"> thumb_down </i>	thumb_down
<i class = "material-icons custom"> thumb_up </i>	thumb_up
<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"> hari ini </i>	hari ini
<i class = "material-icons custom"> tol </i>	korban
<i class = "material-icons custom"> track_changes </i>	track_changes
<i class = "material-icons custom"> terjemahkan </i>	menterjemahkan
<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>	berbalik
<i class = "material-icons custom"> Verified_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"> visibilitas </i>	visibilitas
<i class = "material-icons custom"> visibility_off </i>	visibility_off
<i class = "material-icons custom"> pekerjaan </i>	kerja
<i class = "material-icons custom"> youtube_searched_for </i>	youtube_searched_for
<i class = "material-icons custom"> zoom_in </i>	Perbesar
<i class = "material-icons custom"> zoom_out </i>	zoom_out

Bab ini menjelaskan penggunaan ikon Peringatan (Material) Google. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<!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>

Tabel berikut berisi penggunaan dan hasil dari ikon Google (Material) Alert. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "material-icons custom"> add_alert </i>	add_alert
<i class = "material-icons custom"> kesalahan </i>	kesalahan
<i class = "material-icons custom"> error_outline </i>	error_outline
<i class = "material-icons custom"> peringatan </i>	peringatan

Bab ini menjelaskan penggunaan ikon AV (Material) Google. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<!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>

Tabel berikut berisi penggunaan dan hasil ikon AV Google (Material). Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "material-icons custom"> airplay </i>	diputar
<i class = "material-icons custom"> album </i>	album
<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"> equalizer </i>	equalizer
<i class = "material-icons custom"> eksplisit </i>	eksplisit
<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>	maju_10
<i class = "material-icons custom"> forward_30 </i>	maju_30
<i class = "material-icons custom"> forward_5 </i>	maju_5
<i class = "material-icons custom"> game </i>	permainan
<i class = "material-icons custom"> hd </i>	hd
<i class = "material-icons custom"> pendengaran </i>	pendengaran
<i class = "material-icons custom"> high_quality </i>	kualitas tinggi
<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"> loop </i>	lingkaran
<i class = "material-icons custom"> mic </i>	mikrofon
<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"> film </i>	film
<i class = "material-icons custom"> pause_circle_outline </i>	pause_circle_outline
<i class = "material-icons custom"> new_releases </i>	keluaran terbaru
<i class = "material-icons custom"> not_interested </i>	tidak tertarik
<i class = "material-icons custom"> jeda </i>	berhenti sebentar
<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"> antrian </i>	antre
<i class = "material-icons custom"> queue_music </i>	queue_music
<i class = "material-icons custom"> radio </i>	radio
<i class = "material-icons custom"> recent_actors </i>	recent_actors
<i class = "material-icons custom"> ulangi </i>	ulang
<i class = "material-icons custom"> repeat_one </i>	repeat_one
<i class = "material-icons custom"> putar ulang </i>	ulangan
<i class = "material-icons custom"> airplay </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"> mengocok </i>	mengocok
<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"> tunda </i>	tidur sebentar
<i class = "material-icons custom"> sort_by_alpha </i>	sort_by_alpha
<i class = "material-icons custom"> stop </i>	berhenti
<i class = "material-icons custom"> sub judul </i>	sub judul
<i class = "material-icons custom"> surround_sound </i>	Suara sekitar
<i class = "material-icons custom"> video_library </i>	video_library
<i class = "material-icons custom"> kamera video </i>	kamera video
<i class = "material-icons custom"> videocam_off </i>	videocam_off
<i class = "material-icons custom"> volume_down </i>	volume_down
<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>	volume_up
<i class = "material-icons custom"> web </i>	web

Bab ini menjelaskan penggunaan ikon Komunikasi (Material) Google. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<!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>

Tabel berikut berisi penggunaan dan hasil ikon Komunikasi (Material) Google. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "material-icons custom"> bisnis </i>	bisnis
<i class = "material-icons custom"> panggilan </i>	panggilan
<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"> obrolan </i>	obrolan
<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>	Bersihkan semua
<i class = "material-icons custom"> komentar </i>	komentar
<i class = "material-icons custom"> contact_phone </i>	contact_phone
<i class = "material-icons custom"> kontak </i>	kontak
<i class = "material-icons custom"> dialer_sip </i>	dialer_sip
<i class = "material-icons custom"> dialpad </i>	dialpad
<i class = "material-icons custom"> forum </i>	forum
<i class = "material-icons custom"> import_export </i>	ekspor Impor
<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"> pesan </i>	pesan
<i class = "material-icons custom"> no_sim </i>	no_sim
<i class = "material-icons custom"> telepon </i>	telepon
<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"> textms </i>	SMS
<i class = "material-icons custom"> pesan suara </i>	pesan suara
<i class = "material-icons custom"> vpn_key </i>	vpn_key
<i class = "material-icons custom"> email </i>	surel
<i class = "material-icons custom"> call_end </i>	call_end

Bab ini menjelaskan penggunaan ikon Konten (Material) Google. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<!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>

Tabel berikut berisi penggunaan dan hasil ikon Konten (Material) Google. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "material-icons custom"> tambahkan </i>	Menambahkan
<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"> arsip </i>	arsip
<i class = "material-icons custom"> backspace </i>	menghapus
<i class = "material-icons custom"> blokir </i>	blok
<i class = "material-icons custom"> hapus </i>	bersih
<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"> buat </i>	membuat
<i class = "material-icons custom"> draf </i>	konsep
<i class = "material-icons custom"> filter_list </i>	filter_list
<i class = "material-icons custom"> bendera </i>	bendera
<i class = "material-icons custom"> font_download </i>	font_download
<i class = "material-icons custom"> maju </i>	meneruskan
<i class = "material-icons custom"> isyarat </i>	sikap
<i class = "material-icons custom"> kotak masuk </i>	kotak masuk
<i class = "material-icons custom"> tautan </i>	tautan
<i class = "material-icons custom"> mail </i>	surat
<i class = "material-icons custom"> markunread </i>	markunread
<i class = "material-icons custom"> ulangi </i>	mengulangi
<i class = "material-icons custom"> hapus </i>	menghapus
<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"> balas </i>	balasan
<i class = "material-icons custom"> reply_all </i>	membalas semua
<i class = "material-icons custom"> laporan </i>	melaporkan
<i class = "material-icons custom"> simpan </i>	menyimpan
<i class = "material-icons custom"> pilih_semua </i>	Pilih Semua
<i class = "material-icons custom"> kirim </i>	Kirim
<i class = "material-icons custom"> urutkan </i>	menyortir
<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"> batalkan </i>	membuka

Bab ini menjelaskan penggunaan Ikon Perangkat Google (Material). Asumsikan bahwacustom adalah nama kelas CSS di mana kami mendefinisikan ukuran dan warna seperti yang ditunjukkan di bawah ini.

<!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>

Tabel berikut berisi penggunaan dan hasil Ikon Perangkat Google (Material).

Pemakaian	Hasil
<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>	waktu akses
<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>	baterai penuh
<i class = "material-icons custom"> battery_std </i>	baterai_std
<i class = "material-icons custom"> battery_unknown </i>	battery_unknown
<i class = "material-icons custom"> bluetooth </i>	bluetooth
<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"> brightness_auto </i>	brightness_auto
<i class = "material-icons custom"> brightness_high </i>	brightness_high
<i class = "material-icons custom"> brightness_low </i>	brightness_low
<i class = "material-icons custom"> brightness_medium </i>	brightness_medium
<i class = "material-icons custom"> data_usage </i>	penggunaan data
<i class = "material-icons custom"> developer_mode </i>	mode pengembang
<i class = "material-icons custom"> perangkat </i>	perangkat
<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>	perputaran layar
<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"> penyimpanan </i>	penyimpanan
<i class = "material-icons custom"> usb </i>	usb
<i class = "material-icons custom"> wallpaper </i>	wallpaper
<i class = "material-icons custom"> widget </i>	widget
<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

Bab ini menjelaskan penggunaan ikon Editor (Material) Google. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<!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>

Tabel berikut berisi penggunaan dan hasil dari ikon Google (Material) Editor. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "material-icons custom"> attach_file </i>	lampirkan file
<i class = "material-icons custom"> attach_money </i>	attachment_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"> fungsi </i>	fungsi
<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"> tautan_sisipkan </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>	uang_off
<i class = "material-icons custom"> terbitkan </i>	menerbitkan
<i class = "material-icons custom"> space_bar </i>	spasi_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>	wrap_text

Bab ini menjelaskan penggunaan ikon File (Material) Google. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<!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>

Tabel berikut berisi penggunaan dan hasil ikon File (Material) Google. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "material-icons custom"> lampiran </i>	lampiran
<i class = "material-icons custom"> cloud </i>	awan
<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>	file_upload
<i class = "material-icons custom"> folder </i>	map
<i class = "material-icons custom"> folder_open </i>	folder_open
<i class = "material-icons custom"> folder_shared </i>	folder_berbagi

Bab ini menjelaskan penggunaan ikon Perangkat Keras Google (Material). Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<!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>

Tabel berikut berisi penggunaan dan hasil ikon Perangkat Keras (Material) Google. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "material-icons custom"> cast </i>	Pemeran
<i class = "material-icons custom"> cast_connected </i>	cast_connected
<i class = "material-icons custom"> komputer </i>	komputer
<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"> dok </i>	dermaga
<i class = "material-icons custom"> gamepad </i>	gamepad
<i class = "material-icons custom"> headset </i>	headset
<i class = "material-icons custom"> headset_mic </i>	headset_mic
<i class = "material-icons custom"> keyboard </i>	papan ketik
<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"> laptop </i>	laptop
<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"> memori </i>	Penyimpanan
<i class = "material-icons custom"> mouse </i>	mouse
<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>	input daya
<i class = "material-icons custom"> router </i>	router
<i class = "material-icons custom"> pemindai </i>	pemindai
<i class = "material-icons custom"> keamanan </i>	keamanan
<i class = "material-icons custom"> sim_card </i>	kartu SIM
<i class = "material-icons custom"> ponsel cerdas </i>	smartphone
<i class = "material-icons custom"> speaker </i>	pembicara
<i class = "material-icons custom"> speaker_group </i>	speaker_group
<i class = "material-icons custom"> tablet </i>	tablet
<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"> mainan </i>	mainan
<i class = "material-icons custom"> tv </i>	televisi
<i class = "material-icons custom"> jam tangan </i>	menonton

Bab ini menjelaskan penggunaan ikon Gambar (Material) Google. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<!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>

Tabel berikut berisi penggunaan dan hasil dari ikon Gambar (Material) Google. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "material-icons custom"> add_to_photos </i>	add_to_photos
<i class = "material-icons custom"> sesuaikan </i>	menyesuaikan
<i class = "material-icons custom"> asisten </i>	asisten
<i class = "material-icons custom"> asisten </i>	asisten
<i class = "material-icons custom"> audiotrack </i>	audiotrack
<i class = "material-icons custom"> blur_circular </i>	blur_circular
<i class = "material-icons custom"> blur_linear </i>	blur_linear
<i class = "material-icons custom"> blur_off </i>	blur_off
<i class = "material-icons custom"> blur_on </i>	blur_on
<i class = "material-icons custom"> brightness_1 </i>	brightness_1
<i class = "material-icons custom"> brightness_2 </i>	brightness_2
<i class = "material-icons custom"> brightness_3 </i>	brightness_3
<i class = "material-icons custom"> brightness_4 </i>	brightness_4
<i class = "material-icons custom"> brightness_5 </i>	brightness_5
<i class = "material-icons custom"> brightness_6 </i>	kecerahan_6
<i class = "material-icons custom"> brightness_7 </i>	kecerahan_7
<i class = "material-icons custom"> broken_image </i>	broken_image
<i class = "material-icons custom"> kuas </i>	sikat
<i class = "material-icons custom"> kamera </i>	kamera
<i class = "material-icons custom"> camera_alt </i>	camera_alt
<i class = "material-icons custom"> camera_front </i>	camera_front
<i class = "material-icons custom"> camera_rear </i>	camera_rear
<i class = "material-icons custom"> camera_roll </i>	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"> koleksi </i>	koleksi
<i class = "material-icons custom"> collections_bookmark </i>	collections_bookmark
<i class = "material-icons custom"> color_lens </i>	color_lens
<i class = "material-icons custom"> warnai </i>	mewarnai
<i class = "material-icons custom"> bandingkan </i>	membandingkan
<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"> pangkas </i>	tanaman
<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"> detail </i>	detailnya
<i class = "material-icons custom"> edit </i>	edit
<i class = "material-icons custom"> eksposur </i>	paparan
<i class = "material-icons custom"> exposure_neg_1 </i>	eksposur_neg_1
<i class = "material-icons custom"> exposure_plus_1 </i>	eksposur_plus_1
<i class = "material-icons custom"> exposure_plus_2 </i>	eksposur_plus_2
<i class = "material-icons custom"> exposure_zero </i>	eksposur_zero
<i class = "material-icons custom"> filter </i>	Saring
<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"> suar </i>	suar
<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"> flip </i>	Balik
<i class = "material-icons custom"> gradien </i>	gradien
<i class = "material-icons custom"> butir </i>	gandum
<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"> penyembuhan </i>	penyembuhan
<i class = "material-icons custom"> gambar </i>	gambar
<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"> lanskap </i>	pemandangan
<i class = "material-icons custom"> leak_add </i>	kebocoran_add
<i class = "material-icons custom"> kebocoran_remove </i>	kebocoran_remove
<i class = "material-icons custom"> lensa </i>	lensa
<i class = "material-icons custom"> tampilan </i>	penampilan
<i class = "material-icons custom" >look_3 </i>	tampak_3
<i class = "material-icons custom" >look_4 </i>	terlihat_4
<i class = "material-icons custom" >look_5 </i>	penampilan_5
<i class = "material-icons custom" >look_6 </i>	penampilan_6
<i class = "material-icons custom" >look_one </i>	look_one
<i class = "material-icons custom" >look_two </i>	tampak_dua
<i class = "material-icons custom"> pembesar </i>	alat pembesar
<i class = "material-icons custom"> monokrom_photos </i>	monokrom_photos
<i class = "material-icons custom"> movie_creation </i>	movie_creation
<i class = "material-icons custom"> music_note </i>	music_note
<i class = "material-icons custom"> alam </i>	alam
<i class = "material-icons custom"> nature_people </i>	nature_people
<i class = "material-icons custom"> wb_sunny </i>	wb_sunny
<i class = "material-icons custom"> navigation_next </i>	navigation_next
<i class = "material-icons custom"> navigation_before </i>	navigation_before
<i class = "material-icons custom"> palet </i>	palet
<i class = "material-icons custom"> panorama </i>	panorama
<i class = "material-icons custom"> panorama_fish_eye </i>	panorama_fish_eye
<i class = "material-icons custom"> panorama_horizontal </i>	panorama_horizontal
<i class = "material-icons custom"> panorama_vertical </i>	panorama_vertical
<i class = "material-icons custom"> panorama_wide_angle </i>	panorama_wide_angle
<i class = "material-icons custom"> foto </i>	foto
<i class = "material-icons custom"> photo_album </i>	album Foto
<i class = "material-icons custom"> photo_camera </i>	kamera foto
<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>	gambar_as_pdf
<i class = "material-icons custom"> potret </i>	potret
<i class = "material-icons custom"> remove_red_eye </i>	remove_red_eye
<i class = "material-icons custom"> rotate_90_degrees_ccw </i>	rotate_90_degrees_ccw
<i class = "material-icons custom"> rotate_left </i>	rotate_left
<i class = "material-icons custom"> rotate_right </i>	Putar ke kanan
<i class = "material-icons custom"> slideshow </i>	slideshow
<i class = "material-icons custom"> luruskan </i>	meluruskan
<i class = "material-icons custom"> gaya </i>	gaya
<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"> tekstur </i>	tekstur
<i class = "material-icons custom"> timelapse </i>	timelapse
<i class = "material-icons custom"> timer </i>	timer
<i class = "material-icons custom"> timer_10 </i>	timer_10
<i class = "material-icons custom"> timer_3 </i>	timer_3
<i class = "material-icons custom"> timer_off </i>	timer_off
<i class = "material-icons custom"> nada suara </i>	nada suara
<i class = "material-icons custom"> transformasi </i>	mengubah
<i class = "material-icons custom"> selaraskan </i>	lagu
<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"> vinyet </i>	skema
<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

Bab ini menjelaskan penggunaan ikon Peta Google (Material). Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<!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>

Tabel berikut berisi penggunaan dan hasil dari ikon Google (Material) Maps. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "material-icons custom"> pernah ke sini </i>	telah di sini
<i class = "material-icons custom"> petunjuk arah </i>	petunjuk arah
<i class = "material-icons custom"> direction_bike </i>	direction_bike
<i class = "material-icons custom"> direction_boat </i>	direction_boat
<i class = "material-icons custom"> direction_bus </i>	direction_bus
<i class = "material-icons custom"> direction_car </i>	arah_car
<i class = "material-icons custom"> direction_railway </i>	direction_railway
<i class = "material-icons custom"> direction_run </i>	direction_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">flight</i>	flight
<i class="material-icons custom">hotel</i>	hotel
<i class="material-icons custom">layers</i>	layers
<i class="material-icons custom">layers_clear</i>	layers_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

Bab ini menjelaskan penggunaan ikon Sosial (Material) Google. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<!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>

Tabel berikut berisi penggunaan dan hasil ikon Sosial (Material) Google. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "material-icons custom"> kue </i>	kue
<i class = "material-icons custom"> domain </i>	domain
<i class = "material-icons custom"> grup </i>	kelompok
<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"> suasana hati </i>	suasana hati
<i class = "material-icons custom"> mood_bad </i>	mood_bad
<i class = "material-icons custom"> pemberitahuan </i>	notifikasi
<i class = "material-icons custom"> notifications_active </i>	notifikasi_aktif
<i class = "material-icons custom"> notifications_none </i>	notifikasi_none
<i class = "material-icons custom"> notifications_off </i>	notifikasi_off
<i class = "material-icons custom"> notifications_paused </i>	notification_paused
<i class = "material-icons custom"> halaman </i>	halaman
<i class = "material-icons custom"> party_mode </i>	party_mode
<i class = "material-icons custom"> orang </i>	orang-orang
<i class = "material-icons custom"> people_outline </i>	people_outline
<i class = "material-icons custom"> orang </i>	orang
<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>	tambah satu
<i class = "material-icons custom"> jajak pendapat </i>	pemilihan
<i class = "material-icons custom"> publik </i>	publik
<i class = "material-icons custom"> sekolah </i>	sekolah
<i class = "material-icons custom"> bagikan </i>	Bagikan
<i class = "material-icons custom"> whatshot </i>	whatshot

Bab ini menjelaskan penggunaan ikon Toggle (Material) Google. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<!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>

Tabel berikut berisi penggunaan dan hasil ikon Toggle Google (Material). Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "material-icons custom"> check_box </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"> bintang </i>	bintang
<i class = "material-icons custom"> star_border </i>	star_border
<i class = "material-icons custom"> star_half </i>	star_half

Ini adalah pustaka ikon monokromatik yang tersedia dalam format gambar raster, format gambar vektor, dan sebagai font. Ini menyediakan lebih dari 250 mesin terbang dalam format font. Anda dapat menggunakan font ini di proyek web Anda. Mesin terbang ini tidak gratis, namun jika Anda tidak perlu mengeluarkan uang apa pun jika Anda menggunakannya dalam proyek berbasis Bootstrap.

Memuat Font (perpustakaan)

Untuk memuat pustaka Bootstrap Glyphicons, salin dan tempel baris berikut di bagian <head> halaman web.

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

Menggunakan Ikon

Bootstrap Glyphicons menyediakan sejumlah ikon. Pilih salah satunya dan tambahkan nama kelas ikon ke elemen HTML mana pun di dalam tag <body>. Dalam contoh berikut, kami telah menggunakan ikon pohon dan nama kelasnya adalahtree-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>

Ini akan menghasilkan keluaran sebagai berikut -

Mendefinisikan Ukuran

Anda dapat menambah atau mengurangi ukuran ikon dengan menentukan ukurannya di CSS dan menggunakannya bersama dengan nama kelas seperti yang ditunjukkan di bawah ini. Dalam contoh berikut, kami telah mendefinisikan ukurannya sebagai 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>

Ini akan menghasilkan keluaran sebagai berikut:

Mendefinisikan Warna

Anda dapat menentukan warna ikon menggunakan CSS. Contoh contoh berikut menunjukkan cara mengubah warna ikon pohon.

<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>

Ini akan menghasilkan keluaran sebagai berikut -

Bab ini menjelaskan penggunaan Bootstrap Glyphicons (Komponen). Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

<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>

Tabel berikut berisi penggunaan dan hasil Bootstrap Glyphicons (Komponen). Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian	Hasil
<i class = "glyphicon glyphicon-asterisk kustom"> </i>
<i class = "glyphicon glyphicon-plus kustom"> </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-envelope custom"> </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 kustom"> </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 kustom"> </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 kustom"> </i>
<i class = "glyphicon glyphicon-zoom-out kustom"> </i>
<i class = "glyphicon glyphicon-off kustom"> </i>
<i class = "glyphicon glyphicon-signal custom"> </i>
<i class = "glyphicon glyphicon-cog custom"> </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 kustom"> </i>
<i class = "glyphicon glyphicon-unduh ubahsuaian"> </i>
<i class = "glyphicon glyphicon-upload kustom"> </i>
<i class = "glyphicon glyphicon-inbox custom"> </i>
<i class = "glyphicon glyphicon-play-circle khusus"> </i>
<i class = "glyphicon glyphicon-repeat custom"> </i>
<i class = "glyphicon glyphicon-refresh custom"> </i>
<i class = "glyphicon glyphicon-list-alt custom"> </i>
<i class = "glyphicon glyphicon-lock custom"> </i>
<i class = "glyphicon glyphicon-flag custom"> </i>
<i class = "glyphicon glyphicon-headphones kustom"> </i>
<i class = "glyphicon glyphicon-volume-off kustom"> </i>
<i class = "glyphicon glyphicon-volume-down kustom"> </i>
<i class = "glyphicon glyphicon-volume-up kustom"> </i>
<i class = "glyphicon glyphicon-qrcode kustom"> </i>
<i class = "glyphicon glyphicon-barcode custom"> </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 kustom"> </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 custom"> </i>
<i class = "glyphicon glyphicon-text-width custom"> </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 kustom"> </i>
<i class = "glyphicon glyphicon-picture custom"> </i>
<i class = "glyphicon glyphicon-map-marker custom"> </i>
<i class = "glyphicon glyphicon-sesuaikan khusus"> </i>
<i class = "glyphicon glyphicon-tint custom"> </i>
<i class = "glyphicon glyphicon-edit kustom"> </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 kustom"> </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 custom"> </i>
<i class = "glyphicon glyphicon-chevron-right kustom"> </i>
<i class = "glyphicon glyphicon-plus-sign custom"> </i>
<i class = "glyphicon glyphicon-minus-sign custom"> </i>
<i class = "glyphicon glyphicon-remove-sign custom"> </i>
<i class = "glyphicon glyphicon-ok-sign custom"> </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 kustom"> </i>
<i class = "glyphicon glyphicon-ban-circle kustom"> </i>
<i class = "glyphicon glyphicon-arrow-left custom"> </i>
<i class = "glyphicon glyphicon-arrow-right kustom"> </i>
<i class = "glyphicon glyphicon-arrow-up kustom"> </i>
<i class = "glyphicon glyphicon-arrow-down kustom"> </i>
<i class = "glyphicon glyphicon-share-alt custom"> </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 kustom"> </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 kustom"> </i>
<i class = "glyphicon glyphicon-chevron-up khusus"> </i>
<i class = "glyphicon glyphicon-chevron-down kustom"> </i>
<i class = "glyphicon glyphicon-retweet kustom"> </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 custom"> </i>
<i class = "glyphicon glyphicon-resize-horizontal custom"> </i>
<i class = "glyphicon glyphicon-hdd custom"> </i>
<i class = "glyphicon glyphicon-bullhorn kustom"> </i>
<i class = "glyphicon glyphicon-bell custom"> </i>
<i class = "glyphicon glyphicon-certificate custom"> </i>
<i class = "glyphicon glyphicon-thumbs-up kustom"> </i>
<i class = "glyphicon glyphicon-thumbs-down kustom"> </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 kustom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-left kustom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-up kustom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-down kustom"> </i>
<i class = "glyphicon glyphicon-globe 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 custom"> </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 custom"> </i>
<i class = "glyphicon glyphicon-gbp kustom"> </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 kustom"> </i>
<i class = "glyphicon glyphicon-sort-by-order custom"> </i>
<i class = "glyphicon glyphicon-sort-by-order-alt custom"> </i>
<i class = "glyphicon glyphicon-sort-by-attribute custom"> </i>
<i class = "glyphicon glyphicon-sort-by-atribut-alt kustom"> </i>
<i class = "glyphicon glyphicon-kustom tidak dicentang"> </i>
<i class = "glyphicon glyphicon-expand custom"> </i>
<i class = "glyphicon glyphicon-collapse-down custom"> </i>
<i class = "glyphicon glyphicon-collapse-up custom"> </i>
<i class = "glyphicon glyphicon-log-in ubahsuaian"> </i>
<i class = "glyphicon glyphicon-flash kustom"> </i>
<i class = "glyphicon glyphicon-log-out kustom"> </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-save custom"> </i>
<i class = "glyphicon glyphicon-import custom"> </i>
<i class = "glyphicon glyphicon-export custom"> </i>
<i class = "glyphicon glyphicon-send custom"> </i>
<i class = "glyphicon glyphicon-floppy-disk custom"> </i>
<i class = "glyphicon glyphicon-floppy-stored 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-compressed custom"> </i>
<i class = "glyphicon glyphicon-earphone khusus"> </i>
<i class = "glyphicon glyphicon-phone custom"> </i>
<i class = "glyphicon glyphicon-tower custom"> </i>
<i class = "glyphicon glyphicon-stats kustom"> </i>
<i class = "glyphicon glyphicon-sd-video kustom"> </i>
<i class = "glyphicon glyphicon-hd-video kustom"> </i>
<i class = "glyphicon glyphicon-subtitel khusus"> </i>
<i class = "glyphicon glyphicon-sound-stereo kustom"> </i>
<i class = "glyphicon glyphicon-sound-dolby kustom"> </i>
<i class = "glyphicon glyphicon-sound-5-1 custom"> </i>
<i class = "glyphicon glyphicon-sound-6-1 custom"> </i>
<i class = "glyphicon glyphicon-sound-7-1 custom"> </i>
<i class = "glyphicon glyphicon-copyright-mark custom"> </i>
<i class = "glyphicon glyphicon-Registration-mark custom"> </i>
<i class = "glyphicon glyphicon-cloud-download kustom"> </i>
<i class = "glyphicon glyphicon-cloud-upload kustom"> </i>
<i class = "glyphicon glyphicon-tree-conifer custom"> </i>
<i class = "glyphicon glyphicon-tree-deciduous"> </i>