Web Simgeleri - Hızlı Kılavuz

Simge, bir web sayfasındaki belirli bir eylemi veya yeteneği temsil etmek için kullanılan bir semboldür. Simgeler belgelerde ve uygulamalarda kullanılır ve seçilebilir veya seçilemez olabilirler. Örneğin, bir uygulamanın butonlarında gördüğümüz görsellerin tamamı ikonlardır ve bu butonlar seçilebilir. Benzer şekilde, bir simgeyi şirket logosu olarak kullandığımızda, normalde seçilemez.

Windows ortamında, sistem sesini kısarsak, aşağıda gösterildiği gibi bir ikon yardımı ile temsil edilecektir.

Web simgelerini kullanarak, bir yükleme sayfasını, devre dışı bırakılmış bir seçeneği, bir bağlantıyı, bir yeniden yönlendirmeyi, vb. Temsil edebiliriz. Bu simgeler çevrilebilir, döndürülebilir, yeniden boyutlandırılabilir, çerçevelenebilir, ters çevrilebilir ve renklendirilebilir.

Simge Yazı Tipleri

Simge Yazı Tipleri, semboller ve glifler içerir. İstediğiniz yazı tipini yükledikten sonra, simgenin sınıf adını kullanarak o yazı tipi tarafından sağlanan simgelerden herhangi birini kullanabilirsiniz. Simgelere farklı renkler uygulayabilir ve bunları CSS özelliklerini kullanarak yeniden boyutlandırabiliriz. Simge sağlayan birkaç simge kitaplığı (yazı tipi) vardır. Bu öğretici üç ana yazı tipine odaklanmaktadır:

Harika Yazı Tipi
Bootstrap Glyphicons
Google'ın Materyal Simgeleri

Harika Yazı Tipi

Bu yazı tipi 519 ücretsiz ölçeklenebilir vektör simgesi sağlar. Bu kütüphane hem kişisel hem de ticari kullanım için tamamen ücretsizdir. Bu simgeler kolaylıkla özelleştirilebilir. Başlangıçta Bootstrap için geliştirildi.

Bootstrap Glyphicons

Bu, raster görüntü biçimlerinde, vektör görüntü biçimlerinde ve yazı tipi olarak kullanılabilen tek renkli simgelerden oluşan bir kitaplıktır. Yazı tipi biçiminde 250'den fazla glif sağlar. Bu yazı tiplerini web projelerinizde kullanabilirsiniz. Bu simgeler ücretsiz değildir, ancak onları Bootstrap tabanlı projelerde satın almak zorunda kalmadan kullanabilirsiniz.

Google'ın Materyal Simgeleri

Google, "materyal tasarım yönergeleri" kapsamında tasarlanmış yaklaşık 750 simge sağlar ve bunlar Material Designsimgeler. Bu simgeler basittir ve tüm modern web tarayıcılarını destekler. Bu simgeler vektör tabanlı olduklarından ölçeklenebilirler. Bu simgeleri kullanmak için yazı tipini (kütüphane) yüklemeliyizmaterial-icons.

Font Awesome simgeler kitaplığı, 519 ücretsiz ölçeklenebilir vektör simge sağlar. Bu kütüphane hem kişisel hem de ticari kullanım için tamamen ücretsizdir. Başlangıçta Bootstrap için tasarlanan bu simgeler kolayca özelleştirilebilir.

Yazı Tipi Kitaplığını Yükleme

Font Awesome kitaplığını yüklemek için, aşağıdaki satırı kopyalayıp web sayfasının <head> bölümüne yapıştırın.

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

Simgeyi Kullanma

Font Awesome birkaç simge sağlar. Bunlardan birini seçin ve simge sınıfının adını <body> etiketi içindeki herhangi bir HTML öğesine ekleyin. Aşağıdaki örnekte, Hindistan para birimi simgesini kullandık.

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

Aşağıdaki çıktıyı üretecektir -

Boyutu Tanımlamak

Aşağıda gösterildiği gibi, boyutunu CSS kullanarak ve sınıf adıyla birlikte kullanarak bir simgenin boyutunu artırabilir veya azaltabilirsiniz. Verilen örnekte bedeni 6 em olarak ilan ettik.

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

Aşağıdaki çıktıyı üretecektir -

Rengi Tanımlamak

Tıpkı boyut gibi, CSS kullanarak simgelerin rengini tanımlayabilirsiniz. Aşağıdaki örnek, Hindistan para birimi simgesinin renginin nasıl değiştirileceğini gösterir.

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

Kategori Listesi

Font Awesome, aşağıdaki kategorilerde 519 simge sağlar -

Web Uygulama Simgeleri
El simgeleri
Ulaşım Simgeleri
Cinsiyet Simgeleri
Dosya Türü Simgeleri
Spinner Simgeler
Form Kontrolü Simgeleri
Ödeme Simgeleri
Grafik Simgeleri
Para Birimi Simgeleri
Metin düzenleyici Simgeler
Yön Simgeleri
Video Oynatıcı Simgeleri
Marka Simgeleri

Bu simgelerden herhangi birini kullanmak için, bu bölümde verilen programlardaki sınıf adını, istenen simgenin sınıf adıyla değiştirmeniz gerekir. Bu Ünitenin (Font Awesome) sonraki bölümlerinde, çeşitli Font Awesome simgelerinin kullanımını ve ilgili çıktılarını kategori bazında açıkladık.

Bu bölümde Font Awesome Web Uygulaması simgelerinin kullanımı açıklanmaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Font Awesome Web Uygulaması simgelerinin kullanımını ve sonuçlarını göstermektedir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "fa fa-ayarlama özel"> </i>
<i class = "fa fa-anchor özel"> </i>
<i class = "fa fa-archive özel"> </i>
<i class = "fa fa-area-chart özel"> </i>
<i class = "fa fa-oklar özel"> </i>
<i class = "fa fa-oklar-h özel"> </i>
<i class = "fa fa-oklar-v özel"> </i>
<i class = "fa fa-asterisk custom"> </i>
<i class = "fa fa-at özel"> </i>
<i class = "fa fa-otomobil özel"> </i>
<i class = "fa fa-balance-scale özel"> </i>
<i class = "fa fa-ban özel"> </i>
<i class = "fa fa-bank özel"> </i>
<i class = "fa fa-bar-chart özel"> </i>
<i class = "fa fa-bar-chart-o özel"> </i>
<i class = "fa fa-barcode özel"> </i>
<i class = "fa fa-bars özel"> </i>
<i class = "fa fa-bed özel"> </i>
<i class = "fa fa-beer özel"> </i>
<i class = "fa fa-bell özel"> </i>
<i class = "fa fa-wrench özel"> </i>
<i class = "fa fa-bell-o özel"> </i>
<i class = "fa fa-bell-slash özel"> </i>
<i class = "fa fa-bell-slash-o özel"> </i>
<i class = "fa fa-bisiklet özel"> </i>
<i class = "fa fa-battery-0 özel"> </i>
<i class = "fa fa-battery-1 özel"> </i>
<i class = "fa fa-battery-2 özel"> </i>
<i class = "fa fa-battery-3 özel"> </i>
<i class = "fa fa-battery-4 özel"> </i>
<i class = "fa fa-battery-empty özel"> </i>
<i class = "fa fa-battery-quarter özel"> </i>
<i class = "fa fa-battery-half özel"> </i>
<i class = "fa fa-battery-üçte üçü özel"> </i>
<i class = "fa fa-battery-full özel"> </i>
<i class = "fa fa-doğum günü-pastası özel"> </i>
<i class = "fa fa-bolt özel"> </i>
<i class = "fa fa-bomb özel"> </i>
<i class = "fa fa-book özel"> </i>
<i class = "fa fa-bookmark özel"> </i>
<i class = "fa fa-bookmark-o özel"> </i>
<i class = "fa fa-evrak çantası özel"> </i>
<i class = "fa fa-bug özel"> </i>
<i class = "fa fa-building özel"> </i>
<i class = "fa fa-building-o özel"> </i>
<i class = "fa fa-bullhorn özel"> </i>
<i class = "fa fa-bullseye özel"> </i>
<i class = "fa fa-bus özel"> </i>
<i class = "fa fa-cab özel"> </i>
<i class = "fa fa-video-camera özel"> </i>
<i class = "fa fa-calendar özel"> </i>
<i class = "fa fa-calendar-check-o özel"> </i>
<i class = "fa fa-calendar-minus-o özel"> </i>
<i class = "fa fa-calendar-o özel"> </i>
<i class = "fa fa-calendar-plus-o özel"> </i>
<i class = "fa fa-calendar-times-o özel"> </i>
<i class = "fa fa-camera özel"> </i>
<i class = "fa fa-camera-retro özel"> </i>
<i class = "fa fa-car özel"> </i>
<i class = "fa fa-cc özel"> </i>
<i class = "fa fa-caret-square-o-down özel"> </i>
<i class = "fa fa-caret-square-o-left özel"> </i>
<i class = "fa fa-caret-square-o-right özel"> </i>
<i class = "fa fa-caret-square-o-up özel"> </i>
<i class = "fa fa-cart-arrow-down özel"> </i>
<i class = "fa fa-cart-plus özel"> </i>
<i class = "fa fa-sertifika özel"> </i>
<i class = "fa fa-child özel"> </i>
<i class = "fa fa-check özel"> </i>
<i class = "fa fa-check-circle özel"> </i>
<i class = "fa fa-check-circle-o özel"> </i>
<i class = "fa fa-check-square özel"> </i>
<i class = "fa fa-check-square-o özel"> </i>
<i class = "fa fa-circle özel"> </i>
<i class = "fa fa-circle-o özel"> </i>
<i class = "fa fa-circle-o-notch özel"> </i>
<i class = "fa fa-circle-thin özel"> </i>
<i class = "fa fa-clock-o özel"> </i>
<i class = "fa fa-clone özel"> </i>
<i class = "fa fa-close özel"> </i>
<i class = "fa fa-anchor özel"> </i>
<i class = "fa fa-cloud-download özel"> </i>
<i class = "fa fa-cloud-upload özel"> </i>
<i class = "fa fa-code özel"> </i>
<i class = "fa fa-code-fork özel"> </i>
<i class = "fa fa-coffee özel"> </i>
<i class = "fa fa-cog özel"> </i>
<i class = "fa fa-cogs custom"> </i>
<i class = "fa fa-comment özel"> </i>
<i class = "fa fa-comment-o özel"> </i>
<i class = "fa fa-commenting özel"> </i>
<i class = "fa fa-commenting-o özel"> </i>
<i class = "fa fa-comments özel"> </i>
<i class = "fa fa-comments-o özel"> </i>
<i class = "fa fa-compass özel"> </i>
<i class = "fa fa-copyright custom"> </i>
<i class = "fa fa-creative-commons özel"> </i>
<i class = "fa fa-kredi-kartı özel"> </i>
<i class = "fa fa-crop özel"> </i>
<i class = "fa fa-crosshairs özel"> </i>
<i class = "fa fa-cube özel"> </i>
<i class = "fa fa-cubes özel"> </i>
<i class = "fa fa-cutlery özel"> </i>
<i class = "fa fa-dashboard custom"> </i>
<i class = "fa fa-veritabanı özel"> </i>
<i class = "fa fa-desktop özel"> </i>
<i class = "fa fa-diamond özel"> </i>
<i class = "fa fa-dot-circle-o özel"> </i>
<i class = "fa fa-download özel"> </i>
<i class = "fa fa-edit özel"> </i>
<i class = "fa fa-ellipsis-h özel"> </i>
<i class = "fa fa-ellipsis-v özel"> </i>
<i class = "fa fa-envelope özel"> </i>
<i class = "fa fa-envelope-o özel"> </i>
<i class = "fa fa-envelope-square özel"> </i>
<i class = "fa fa-silgi özel"> </i>
<i class = "fa fa-exchange özel"> </i>
<i class = "fa fa-exclamation özel"> </i>
<i class = "fa fa-exclamation-circle özel"> </i>
<i class = "fa fa-exclamation-triangle özel"> </i>
<i class = "fa fa-external-link özel"> </i>
<i class = "fa fa-external-link-square özel"> </i>
<i class = "fa fa-eye özel"> </i>
<i class = "fa fa-eye-slash özel"> </i>
<i class = "fa fa-eyedropper özel"> </i>
<i class = "fa fa-fax özel"> </i>
<i class = "fa fa-feed özel"> </i>
<i class = "fa fa-kadın özel"> </i>
<i class = "fa fa-savaş uçağı özel"> </i>
<i class = "fa fa-file-archive-o özel"> </i>
<i class = "fa fa-file-audio-o özel"> </i>
<i class = "fa fa-file-code-o özel"> </i>
<i class = "fa fa-file-excel-o özel"> </i>
<i class = "fa fa-hacim azaltma özel"> </i>
<i class = "fa fa-file-movie-o özel"> </i>
<i class = "fa fa-file-pdf-o özel"> </i>
<i class = "fa fa-file-photo-o özel"> </i>
<i class = "fa fa-file-picture-o özel"> </i>
<i class = "fa fa-file-powerpoint-o özel"> </i>
<i class = "fa fa-file-sound-o özel"> </i>
<i class = "fa fa-file-video-o özel"> </i>
<i class = "fa fa-file-word-o özel"> </i>
<i class = "fa fa-file-sound-o özel"> </i>
<i class = "fa fa-file-video-o özel"> </i>
<i class = "fa fa-file-word-o özel"> </i>
<i class = "fa fa-file-zip-o özel"> </i>
<i class = "fa fa-film özel"> </i>
<i class = "fa fa-filter özel"> </i>
<i class = "fa fa-fire özel"> </i>
<i class = "fa fa-yangın söndürücü özel"> </i>
<i class = "fa fa-flag özel"> </i>
<i class = "fa fa-flag-checkered özel"> </i>
<i class = "fa fa-flag-o özel"> </i>
<i class = "fa fa-flash özel"> </i>
<i class = "fa fa-flask özel"> </i>
<i class = "fa fa-flask özel"> </i>
<i class = "fa fa-klasör özel"> </i>
<i class = "fa fa-klasör-o özel"> </i>
<i class = "fa fa-klasör-aç özel"> </i>
<i class = "fa fa-klasör-open-o özel"> </i>
<i class = "fa fa-frown-o özel"> </i>
<i class = "fa fa-volume-off özel"> </i>
<i class = "fa fa-gamepad özel"> </i>
<i class = "fa fa-gavel özel"> </i>
<i class = "fa fa-gear özel"> </i>
<i class = "fa fa-gears özel"> </i>
<i class = "fa fa-gift özel"> </i>
<i class = "fa fa-glass özel"> </i>
<i class = "fa fa-globe custom"> </i>
<i class = "fa fa-graduation-cap özel"> </i>
<i class = "fa fa-group özel"> </i>
<i class = "fa fa-hand-grab-o özel"> </i>
<i class = "fa fa-hand-lizard-o özel"> </i>
<i class = "fa fa-hand-paper-o özel"> </i>
<i class = "fa fa-hand-peace-o özel"> </i>
<i class = "fa fa-hand-pointer-o özel"> </i>
<i class = "fa fa-hand-rock-o özel"> </i>
<i class = "fa fa-hand-scissors-o özel"> </i>
<i class = "fa fa-hand-spock-o özel"> </i>
<i class = "fa fa-hand-paper-o özel"> </i>
<i class = "fa fa-hdd-o özel"> </i>
<i class = "fa fa-kulaklıklar özel"> </i>
<i class = "fa fa-heart özel"> </i>
<i class = "fa fa-heart-o özel"> </i>
<i class = "fa fa-heartbeat özel"> </i>
<i class = "fa fa-history özel"> </i>
<i class = "fa fa-home özel"> </i>
<i class = "fa fa-hotel özel"> </i>
<i class = "fa fa-hourglass özel"> </i>
<i class = "fa fa-hourglass-start özel"> </i>
<i class = "fa fa-hourglass-half özel"> </i>
<i class = "fa fa-hourglass-end özel"> </i>
<i class = "fa fa-i-cursor özel"> </i>
<i class = "fa fa-image özel"> </i>
<i class = "fa fa-inbox özel"> </i>
<i class = "fa fa-endüstri özel"> </i>
<i class = "fa fa-info özel"> </i>
<i class = "fa fa-info-circle özel"> </i>
<i class = "fa fa-kurum özel"> </i>
<i class = "fa fa-key özel"> </i>
<i class = "fa fa-keyboard-o özel"> </i>
<i class = "fa fa-language özel"> </i>
<i class = "fa fa-laptop özel"> </i>
<i class = "fa fa-leaf özel"> </i>
<i class = "fa fa-legal özel"> </i>
<i class = "fa fa-lemon-o özel"> </i>
<i class = "fa fa-level-down özel"> </i>
<i class = "fa fa-level-up özel"> </i>
<i class = "fa fa-life-bouy özel"> </i>
<i class = "fa fa-life-ring özel"> </i>
<i class = "fa fa-life-saver özel"> </i>
<i class = "fa fa-lightbulb-o özel"> </i>
<i class = "fa fa-line-chart özel"> </i>
<i class = "fa fa-location-arrow özel"> </i>
<i class = "fa fa-lock özel"> </i>
<i class = "fa fa-magic özel"> </i>
<i class = "fa fa-magnet özel"> </i>
<i class = "fa fa-mail-forward özel"> </i>
<i class = "fa fa-mail-response özel"> </i>
<i class = "fa fa-mail-response-all özel"> </i>
<i class = "fa fa-erkek özel"> </i>
<i class = "fa fa-map özel"> </i>
<i class = "fa fa-map-marker özel"> </i>
<i class = "fa fa-map-o özel"> </i>
<i class = "fa fa-map-pin özel"> </i>
<i class = "fa fa-map-signs özel"> </i>
<i class = "fa fa-meh-o özel"> </i>
<i class = "fa fa-mikrofon özel"> </i>
<i class = "fa fa-mikrofon-slash özel"> </i>
<i class = "fa fa-minus özel"> </i>
<i class = "fa fa-minus-circle özel"> </i>
<i class = "fa fa-minus-square özel"> </i>
<i class = "fa fa-minus-square-o özel"> </i>
<i class = "fa fa-mobile özel"> </i>
<i class = "fa fa-money özel"> </i>
<i class = "fa fa-moon-o özel"> </i>
<i class = "fa fa-mortar-board özel"> </i>
<i class = "fa fa-motorcycle özel"> </i>
<i class = "fa fa-mouse-pointer özel"> </i>
<i class = "fa fa-music özel"> </i>
<i class = "fa fa-users özel"> </i>
<i class = "fa fa-nesne-grubu özel"> </i>
<i class = "fa fa-object-ungroup özel"> </i>
<i class = "fa fa-paint-brush özel"> </i>
<i class = "fa fa-paper-plane özel"> </i>
<i class = "fa fa-paper-plane-o özel"> </i>
<i class = "fa fa-paw özel"> </i>
<i class = "fa fa-kalem özel"> </i>
<i class = "fa fa-pencil-square özel"> </i>
<i class = "fa fa-kalem-square-o özel"> </i>
<i class = "fa fa-phone özel"> </i>
<i class = "fa fa-phone özel"> </i>
<i class = "fa fa-photo özel"> </i>
<i class = "fa fa-picture-o özel"> </i>
<i class = "fa fa-pie-chart özel"> </i>
<i class = "fa fa-planm özel"> </i>
<i class = "fa fa-volume-up özel"> </i>
<i class = "fa fa-plus özel"> </i>
<i class = "fa fa-plus-circle özel"> </i>
<i class = "fa fa-plus-square özel"> </i>
<i class = "fa fa-plus-square-o özel"> </i>
<i class = "fa fa-power-off özel"> </i>
<i class = "fa fa-print özel"> </i>
<i class = "fa fa-puzzle-piece özel"> </i>
<i class = "fa fa-qrcode özel"> </i>
<i class = "fa fa-question özel"> </i>
<i class = "fa fa-question-circle özel"> </i>
<i class = "fa fa-quote-left özel"> </i>
<i class = "fa fa-quote-right özel"> </i>
<i class = "fa fa-random özel"> </i>
<i class = "fa fa-recycle custom"> </i>
<i class = "fa fa-renew özel"> </i>
<i class = "fa fa-kayıtlı özel"> </i>
<i class = "fa fa-remove özel"> </i>
<i class = "fa fa-yeniden sırala özel"> </i>
<i class = "fa fa-response özel"> </i>
<i class = "fa fa-response-all özel"> </i>
<i class = "fa fa-retweet özel"> </i>
<i class = "fa fa-road özel"> </i>
<i class = "fa fa-anchor özel"> </i>
<i class = "fa fa-rss özel"> </i>
<i class = "fa fa-rss-square özel"> </i>
<i class = "fa fa-search özel"> </i>
<i class = "fa fa-search-minus özel"> </i>
<i class = "fa fa-search-plus özel"> </i>
<i class = "fa fa-send özel"> </i>
<i class = "fa fa-send-o özel"> </i>
<i class = "fa fa-server özel"> </i>
<i class = "fa fa-share özel"> </i>
<i class = "fa fa-share-alt özel"> </i>
<i class = "fa fa-share-alt-square özel"> </i>
<i class = "fa fa-share-alt-o özel"> </i>
<i class = "fa fa-shield özel"> </i>
<i class = "fa fa-ship özel"> </i>
<i class = "fa fa-shopping-cart özel"> </i>
<i class = "fa fa-sign-in özel"> </i>
<i class = "fa fa-sign-out özel"> </i>
<i class = "fa fa-signal özel"> </i>
<i class = "fa fa-sitemap özel"> </i>
<i class = "fa fa-sliders özel"> </i>
<i class = "fa fa-smile-o özel"> </i>
<i class = "fa fa-warning özel"> </i>
<i class = "fa fa-sort özel"> </i>
<i class = "fa fa-sort-alpha-asc özel"> </i>
<i class = "fa fa-sort-alpha-desc özel"> </i>
<i class = "fa fa-sort-asc özel"> </i>
<i class = "fa fa-sort-desc özel"> </i>
<i class = "fa fa-sort-down özel"> </i>
<i class = "fa fa-sort-numeric-asc özel"> </i>
<i class = "fa fa-sort-numeric-desc özel"> </i>
<i class = "fa fa-sort-up özel"> </i>
<i class = "fa fa-space-shuttle özel"> </i>
<i class = "fa fa-spinner özel"> </i>
<i class = "fa fa-spoon özel"> </i>
<i class = "fa fa-square özel"> </i>
<i class = "fa fa-square-o özel"> </i>
<i class = "fa fa-star özel"> </i>
<i class = "fa fa-star-half özel"> </i>
<i class = "fa fa-star-half-empty özel"> </i>
<i class = "fa fa-star-half-full özel"> </i>
<i class = "fa fa-star-half-o özel"> </i>
<i class = "fa fa-star-o özel"> </i>
<i class = "fa fa-sticky-note özel"> </i>
<i class = "fa fa-sticky-note-o özel"> </i>
<i class = "fa fa-street-view özel"> </i>
<i class = "fa fa-valiz özel"> </i>
<i class = "fa fa-sun-o özel"> </i>
<i class = "fa fa-support özel"> </i>
<i class = "fa fa-tablet özel"> </i>
<i class = "fa fa-takometre özel"> </i>
<i class = "fa fa-tag özel"> </i>
<i class = "fa fa-etiketleri özel"> </i>
<i class = "fa fa-tasks özel"> </i>
<i class = "fa fa-taxi özel"> </i>
<i class = "fa fa-televizyon özel"> </i>
<i class = "fa fa-terminal özel"> </i>
<i class = "fa fa-thumb-tack özel"> </i>
<i class = "fa fa-başparmak aşağı özel"> </i>
<i class = "fa fa-ticket özel"> </i>
<i class = "fa fa-times özel"> </i>
<i class = "fa fa-times-circle özel"> </i>
<i class = "fa fa-times-circle-o özel"> </i>
<i class = "fa fa-tint özel"> </i>
<i class = "fa fa-toggle-down özel"> </i>
<i class = "fa fa-toggle-left özel"> </i>
<i class = "fa fa-toggle-off özel"> </i>
<i class = "fa fa-toggle-on özel"> </i>
<i class = "fa fa-toggle-right özel"> </i>
<i class = "fa fa-toggle-up özel"> </i>
<i class = "fa fa-trademark custom"> </i>
<i class = "fa fa-tras özel"> </i>
<i class = "fa fa-trash-o özel"> </i>
<i class = "fa fa-tree özel"> </i>
<i class = "fa fa-trophy özel"> </i>
<i class = "fa fa-truck özel"> </i>
<i class = "fa fa-wheelchair custom"> </i>
<i class = "fa fa-tv özel"> </i>
<i class = "fa fa-şemsiye özel"> </i>
<i class = "fa fa-üniversite özel"> </i>
<i class = "fa fa-unlock özel"> </i>
<i class = "fa fa-unlock-alt özel"> </i>
<i class = "fa fa-unsorted özel"> </i>
<i class = "fa fa-upload özel"> </i>
<i class = "fa fa-user özel"> </i>
<i class = "fa fa-user-plus özel"> </i>
<i class = "fa fa-user-secret özel"> </i>
<i class = "fa fa-user-times özel"> </i>

Bu bölümde Font Awesome Hand simgelerinin kullanımı açıklanmaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Font Awesome Hand simgelerinin kullanımını ve sonuçlarını göstermektedir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "fa fa-hand-rock-o özel"> </i>
<i class = "fa fa-hand-o-left özel"> </i>
<i class = "fa fa-hand-paper-o özel"> </i>
<i class = "fa fa-hand-rock-o özel"> </i>
<i class = "fa fa-hand-stop-o özel"> </i>
<i class = "fa fa-thumbs-o-up özel"> </i>
<i class = "fa fa-hand-lizard-o özel"> </i>
<i class = "fa fa-hand-o-right özel"> </i>
<i class = "fa fa-hand-peace-o özel"> </i>
<i class = "fa fa-hand-scissors-o özel"> </i>
<i class = "fa fa-başparmak aşağı özel"> </i>
<i class = "fa fa-başparmak-yukarı özel"> </i>
<i class = "fa fa-hand-o-up özel"> </i>
<i class = "fa fa-hand-pointer-o özel"> </i>
<i class = "fa fa-hand-spock-o özel"> </i>
<i class = "fa fa-thumbs-o-down özel"> </i>

Bu bölümde Font Awesome Transport simgelerinin kullanımı açıklanmaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Font Awesome Transportation simgelerinin kullanımını ve sonuçlarını göstermektedir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "fa fa-ambulance custom"> </i>
<i class = "fa fa-otomobil özel"> </i>
<i class = "fa fa-bisiklet özel"> </i>
<i class = "fa fa-bus özel"> </i>
<i class = "fa fa-cab özel"> </i>
<i class = "fa fa-car özel"> </i>
<i class = "fa fa-savaş uçağı özel"> </i>
<i class = "fa fa-motorcycle özel"> </i>
<i class = "fa fa-planm özel"> </i>
<i class = "fa fa-rocket özel"> </i>
<i class = "fa fa-ship özel"> </i>
<i class = "fa fa-space-shuttle özel"> </i>
<i class = "fa fa-subway özel"> </i>
<i class = "fa fa-taxi özel"> </i>
<i class = "fa fa-train özel"> </i>
<i class = "fa fa-truck özel"> </i>
<i class = "fa fa-wheelchair custom"> </i>

Bu bölümde Font Awesome Cinsiyet simgelerinin kullanımı açıklanmaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Font Awesome Gender simgelerinin kullanımını ve sonuçlarını gösterir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "fa fa-cinsiyetsiz özel"> </i>
<i class = "fa fa-intersex özel"> </i>
<i class = "fa fa-mars özel"> </i>
<i class = "fa fa-mars-double özel"> </i>
<i class = "fa fa-mars-strok özel"> </i>
<i class = "fa fa-mars-strok-h özel"> </i>
<i class = "fa fa-mars-strok-v özel"> </i>
<i class = "fa fa-mercury özel"> </i>
<i class = "fa fa-neuter özel"> </i>
<i class = "fa fa-transgender özel"> </i>
<i class = "fa fa-transgender-alt özel"> </i>
<i class = "fa fa-venus özel"> </i>
<i class = "fa fa-venus-double özel"> </i>
<i class = "fa fa-venus-mars özel"> </i>

Bu bölümde Font Awesome Dosya Türü simgelerinin kullanımı açıklanmaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Font Awesome File Type simgelerinin kullanımını ve sonuçlarını gösterir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "fa fa-file özel"> </i>
<i class = "fa fa-file-archive-o özel"> </i>
<i class = "fa fa-file-audio-o özel"> </i>
<i class = "fa fa-file-code-o özel"> </i>
<i class = "fa fa-file-excel-o özel"> </i>
<i class = "fa fa-file-image-o özel"> </i>
<i class = "fa fa-file-movie-o özel"> </i>
<i class = "fa fa-file-o özel"> </i>
<i class = "fa fa-file-pdf-o özel"> </i>
<i class = "fa fa-file-photo-o özel"> </i>
<i class = "fa fa-file-picture-o özel"> </i>
<i class = "fa fa-file-powerpoint-o özel"> </i>
<i class = "fa fa-file-video-o özel"> </i>
<i class = "fa fa-file-word-o özel"> </i>
<i class = "fa fa-file-zip-o özel"> </i>
<i class = "fa fa-file-sound-o özel"> </i>
<i class = "fa fa-file-text özel"> </i>
<i class = "fa fa-file-text-o özel"> </i>

Bu bölüm Font Awesome Spinner simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Font Awesome Spinner simgelerinin kullanımını ve sonuçlarını gösterir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "fa fa-circle-o-notch özel"> </i>
<i class = "fa fa-cog özel"> </i>
<i class = "fa fa-gear özel"> </i>
<i class = "fa fa-renew özel"> </i>
<i class = "fa fa-spinner özel"> </i>

Bu bölümde Font Awesome Form Control simgelerinin kullanımı açıklanmaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Font Awesome Form Control simgelerinin kullanımını ve sonuçlarını gösterir. İlgili çıktıları almak için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "fa fa-check-square özel"> </i>
<i class = "fa fa-check-square-o özel"> </i>
<i class = "fa fa-circle özel"> </i>
<i class = "fa fa-circle-o özel"> </i>
<i class = "fa fa-dot-circle-o özel"> </i>
<i class = "fa fa-minus-square özel"> </i>
<i class = "fa fa-minus-square-o özel"> </i>
<i class = "fa fa-plus-square özel"> </i>
<i class = "fa fa-plus-square-o özel"> </i>
<i class = "fa fa-square özel"> </i>
<i class = "fa fa-square-o özel"> </i>

Bu bölümde Font Awesome Ödeme simgelerinin kullanımı açıklanmaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Font Awesome Ödeme simgelerinin kullanımını ve sonuçlarını göstermektedir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "fa fa-cc-amex özel"> </i>
<i class = "fa fa-cc-diners-club özel"> </i>
<i class = "fa fa-cc-find özel"> </i>
<i class = "fa fa-cc-jcb özel"> </i>
<i class = "fa fa-cc-mastercard özel"> </i>
<i class = "fa fa-cc-paypal özel"> </i>
<i class = "fa fa-cc-stripe özel"> </i>
<i class = "fa fa-cc-visa özel"> </i>
<i class = "fa fa-kredi-kartı özel"> </i>

Bu bölüm Font Awesome Chart simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Font Awesome Chart simgelerinin kullanımını ve sonuçlarını göstermektedir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "fa fa-area-chart özel"> </i>
<i class = "fa fa-bar-chart özel"> </i>
<i class = "fa fa-bar-chart-o özel"> </i>
<i class = "fa fa-line-chart özel"> </i>
<i class = "fa fa-pie-chart özel"> </i>

Bu bölümde Font Awesome Para Birimi simgelerinin kullanımı açıklanmaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Font Awesome Para Birimi simgelerinin kullanımını ve sonuçlarını gösterir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "fa fa-bitcoin özel"> </i>
<i class = "fa fa-btc özel"> </i>
<i class = "fa fa-cny özel"> </i>
<i class = "fa fa-dolar özel"> </i>
<i class = "fa fa-eur özel"> </i>
<i class = "fa fa-euro özel"> </i>
<i class = "fa fa-gbp özel"> </i>
<i class = "fa fa-gg özel"> </i>
<i class = "fa fa-gg-circle özel"> </i>
<i class = "fa fa-ils özel"> </i>
<i class = "fa fa-inr özel"> </i>
<i class = "fa fa-jpy özel"> </i>
<i class = "fa fa-krw custom"> </i>
<i class = "fa fa-money özel"> </i>
<i class = "fa fa-rmb özel"> </i>
<i class = "fa fa-ruble özel"> </i>
<i class = "fa fa-rub özel"> </i>
<i class = "fa fa-ruble özel"> </i>
<i class = "fa fa-rupee özel"> </i>
<i class = "fa fa-shekel özel"> </i>
<i class = "fa fa-sheqel özel"> </i>
<i class = "fa fa-try özel"> </i>
<i class = "fa fa-türk-lirası özel"> </i>
<i class = "fa fa-usd özel"> </i>
<i class = "fa fa-won özel"> </i>
<i class = "fa fa-yen özel"> </i>

Bu bölümde Font Awesome Text Editor simgelerinin kullanımı açıklanmaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Font Awesome Text Editor simgelerinin kullanımını ve sonuçlarını gösterir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "fa fa-align-center özel"> </i>
<i class = "fa fa-align-justify özel"> </i>
<i class = "fa fa-align-left özel"> </i>
<i class = "fa fa-align-right özel"> </i>
<i class = "fa fa-bold özel"> </i>
<i class = "fa fa-chain özel"> </i>
<i class = "fa fa-chain-broken özel"> </i>
<i class = "fa fa-clipboard custom"> </i>
<i class = "fa fa-column özel"> </i>
<i class = "fa fa-copy özel"> </i>
<i class = "fa fa-cut özel"> </i>
<i class = "fa-dedent özel"> </i>
<i class = "fa fa-silgi özel"> </i>
<i class = "fa fa-file özel"> </i>
<i class = "fa fa-file-o özel"> </i>
<i class = "fa fa-file-text özel"> </i>
<i class = "fa fa-file-text-o özel"> </i>
<i class = "fa fa-files-o özel"> </i>
<i class = "fa fa-floppy-o özel"> </i>
<i class = "fa fa-font özel"> </i>
<i class = "fa fa-header özel"> </i>
<i class = "fa fa-indent özel"> </i>
<i class = "fa fa-italic özel"> </i>
<i class = "fa fa-link özel"> </i>
<i class = "fa fa-list özel"> </i>
<i class = "fa fa-list-alt özel"> </i>
<i class = "fa fa-list-ol özel"> </i>
<i class = "fa fa-list-ul özel"> </i>
<i class = "fa fa-Outdent özel"> </i>
<i class = "fa fa-paperclip özel"> </i>
<i class = "fa fa-paragraph özel"> </i>
<i class = "fa fa-paste özel"> </i>
<i class = "fa fa-tekrar özel"> </i>
<i class = "fa fa-rotate-left özel"> </i>
<i class = "fa fa-rotate-right özel"> </i>
<i class = "fa fa-save özel"> </i>
<i class = "fa fa-scissors özel"> </i>
<i class = "fa fa-strikethrough özel"> </i>
<i class = "fa fa-subscript özel"> </i>
<i class = "fa fa-table özel"> </i>
<i class = "fa fa-text-heigh özel"> </i>
<i class = "fa fa-text-width özel"> </i>
<i class = "fa fa-th özel"> </i>
<i class = "fa fa-th-large özel"> </i>
<i class = "fa fa-th-list özel"> </i>
<i class = "fa fa-underline özel"> </i>
<i class = "fa fa-undo özel"> </i>
<i class = "fa fa-unlink özel"> </i>

Bu bölüm Font Awesome Directional simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Font Awesome Directional simgelerinin kullanımını ve sonuçlarını gösterir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "fa fa-angle-double-down özel"> </i>
<i class = "fa fa-angle-double-left özel"> </i>
<i class = "fa fa-angle-double-right özel"> </i>
<i class = "fa fa-angle-double-up özel"> </i>
<i class = "fa fa-açı-aşağı özel"> </i>
<i class = "fa fa-angle-left özel"> </i>
<i class = "fa fa-angle-right özel"> </i>
<i class = "fa fa-açı-yukarı özel"> </i>
<i class = "fa fa-arrow-circle-down özel"> </i>
<i class = "fa fa-arrow-circle-left özel"> </i>
<i class = "fa fa-arrow-circle-right özel"> </i>
<i class = "fa fa-arrow-circle-up özel"> </i>
<i class = "fa fa-arrow-circle-o-down özel"> </i>
<i class = "fa fa-arrow-circle-o-left özel"> </i>
<i class = "fa fa-arrow-circle-o-right özel"> </i>
<i class = "fa fa-arrow-circle-o-up özel"> </i>
<i class = "fa fa-arrow-down özel"> </i>
<i class = "fa fa-arrow-left özel"> </i>
<i class = "fa fa-arrow-right özel"> </i>
<i class = "fa fa-arrow-up özel"> </i>
<i class = "fa fa-oklar özel"> </i>
<i class = "fa fa-oklar-alt özel"> </i>
<i class = "fa fa-oklar-h özel"> </i>
<i class = "fa fa-oklar-v özel"> </i>
<i class = "fa fa-caret-down özel"> </i>
<i class = "fa fa-caret-left özel"> </i>
<i class = "fa fa-caret-right özel"> </i>
<i class = "fa fa-caret-up özel"> </i>
<i class = "fa fa-caret-square-o-down özel"> </i>
<i class = "fa fa-caret-square-o-left özel"> </i>
<i class = "fa fa-caret-square-o-right özel"> </i>
<i class = "fa fa-caret-square-o-up özel"> </i>
<i class = "fa fa-chevron-circle-down özel"> </i>
<i class = "fa fa-chevron-circle-left özel"> </i>
<i class = "fa fa-chevron-circle-right özel"> </i>
<i class = "fa fa-chevron-circle-up özel"> </i>
<i class = "fa fa-chevron-down özel"> </i>
<i class = "fa fa-chevron-left özel"> </i>
<i class = "fa fa-chevron-right özel"> </i>
<i class = "fa fa-chevron-up özel"> </i>
<i class = "fa fa-hand-o-down özel"> </i>
<i class = "fa fa-hand-o-left özel"> </i>
<i class = "fa fa-hand-o-right özel"> </i>
<i class = "fa fa-hand-o-up özel"> </i>
<i class = "fa fa-long-arrow-down özel"> </i>
<i class = "fa fa-long-arrow-left özel"> </i>
<i class = "fa fa-long-arrow-right özel"> </i>
<i class = "fa fa-long-arrow-up özel"> </i>
<i class = "fa fa-toggle-down özel"> </i>
<i class = "fa fa-toggle-left özel"> </i>
<i class = "fa fa-toggle-right özel"> </i>
<i class = "fa fa-toggle-up özel"> </i>
<i class = "fa fa-exchange özel"> </i>

Bu bölümde Font Awesome Video Player simgelerinin kullanımı açıklanmaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Font Awesome Video Player simgelerinin kullanımını ve sonuçlarını gösterir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Simgeler
<i class = "fa fa-oklar-alt özel"> </i>
<i class = "fa fa-geriye dönük özel"> </i>
<i class = "fa fa-compress özel"> </i>
<i class = "fa fa-eject özel"> </i>
<i class = "fa fa-expand özel"> </i>
<i class = "fa fa-fast-backward özel"> </i>
<i class = "fa fa-hızlı ileri sar özel"> </i>
<i class = "fa fa-forward özel"> </i>
<i class = "fa fa-play-circle özel"> </i>
<i class = "fa fa-play-circle-o özel"> </i>
<i class = "fa fa-random özel"> </i>
<i class = "fa fa-step-backward özel"> </i>
<i class = "fa fa-stop özel"> </i>
<i class = "fa fa-pause özel"> </i>
<i class = "fa fa-play özel"> </i>
<i class = "fa fa-youtube-play özel"> </i>

Bu bölümde Font Awesome Brand simgelerinin kullanımı açıklanmaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Font Awesome Brand simgelerinin kullanımını ve sonuçlarını göstermektedir. İlgili çıktıları almak için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

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

Bu bölüm Font Awesome Medical simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Font Awesome Medical simgelerinin kullanımını ve sonuçlarını göstermektedir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Simge
<i class = "fa fa-ambulance custom"> </i>
<i class = "fa fa-h-square özel"> </i>
<i class = "fa fa-heart özel"> </i>
<i class = "fa fa-heart-o özel"> </i>
<i class = "fa fa-heartbeat özel"> </i>
<i class = "fa fa-hospital-o özel"> </i>
<i class = "fa fa-medkit özel"> </i>
<i class = "fa fa-plus-square özel"> </i>
<i class = "fa fa-stethoscope özel"> </i>
<i class = "fa fa-user-md özel"> </i>
<i class = "fa fa-wheelchair custom"> </i>

Google, "materyal tasarım yönergeleri" kapsamında tasarlanmış bir dizi 750 simge sağlar ve bunlar Material Designsimgeler. Bu simgeler basittir ve tüm modern web tarayıcılarını destekler. Bu simgeler vektör tabanlı olduklarından ölçeklenebilirler. Bu simgeleri kullanmak için yazı tipini (kütüphane) yüklemeliyizmaterial-icons.

Yazı Tipini Yükleme (kitaplık)

Material-icon kitaplığını yüklemek için aşağıdaki satırı kopyalayıp bir web sayfasının <head> bölümüne yapıştırın.

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

Simgeyi Kullanma

Google'ın Malzeme Simgeleri, uzun bir simge listesi sağlar. Bunlardan herhangi birini seçin ve simge sınıfının adını <body> etiketinin içindeki herhangi bir HTML öğesine ekleyin. Aşağıdaki örnekte, adlı simgeyi kullandıkaccessibility eylem kategorisine ait.

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

Aşağıdaki çıktıyı üretecektir -

Boyutu Tanımlamak

CSS'de boyutunu tanımlayarak ve aşağıda gösterildiği gibi sınıf adıyla birlikte kullanarak bir simgenin boyutunu artırabilir veya azaltabilirsiniz. Aşağıdaki örnekte, bedeni 6 em olarak ilan ettik.

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

Aşağıdaki çıktıyı üretecektir -

Rengi Tanımlamak

Bir simgenin rengini tanımlamak için CSS'yi kullanabilirsiniz. Aşağıdaki örnek, adı verilen bir simgenin rengini nasıl değiştirebileceğinizi gösterir.accessibility.

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

Aşağıdaki çıktıyı üretecektir -

Kategori Listesi

Google'ın Malzeme Simgeleri yazı tipi, aşağıdaki kategorilerde 519 simge sağlar -

Eylem Simgeleri
Uyarı Simgeleri
AV Simgeleri
İletişim Simgeleri
İçerik Simgeleri
Cihaz Simgeleri
Düzenleyici Simgeleri
Dosya Simgeleri
Donanım Simgeleri
Görüntü Simgeleri
Harita Simgeleri
Navigasyon Simgeleri
Bildirim Simgeleri
Sosyal Simgeler
Simgeleri Değiştir

Bu simgelerden herhangi birini kullanmak için, bu bölümde verilen programlardaki sınıf adını, istenen simgenin sınıf adıyla değiştirmeniz gerekir. Bu Birimin ilerleyen bölümlerinde (Malzeme Simgeleri), çeşitli Malzeme Simgelerinin kullanımını ve ilgili çıktılarını kategori bazında açıkladık.

Bu bölüm, Google'ın (Malzeme) Eylem Simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Google'ın (Materyal) Eylem Simgelerinin kullanımını ve sonuçlarını içerir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "material-icons custom"> 3d_rotation </i>	3d_rotation
<i class = "material-icons custom"> erişilebilirlik </i>	ulaşılabilirlik
<i class = "material-icons custom"> account_balance </i>	hesap bakiyesi
<i class = "material-icons custom"> account_balance_wallet </i>	account_balance_wallet
<i class = "material-icons custom"> account_box </i>	account_box
<i class = "material-icons custom"> account_circle </i>	account_circle
<i class = "material-icons custom"> add_shopping_cart </i>	add_shopping_cart
<i class = "material-icons custom"> 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"> duyuru </i>	duyuru
<i class = "material-icons custom"> direction_ratio </i>	açı_ oranı
<i class = "material-icons custom"> değerlendirme </i>	değerlendirme
<i class = "material-icons custom"> atama </i>	Görev
<i class = "material-icons custom"> atama_ind </i>	atama_ind
<i class = "material-icons custom"> assignment_late </i>	assignment_late
<i class = "material-icons custom"> assignment_return </i>	atama_başvurusu
<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"> otomatik olarak yenile </i>	Otomatik Yenile
<i class = "material-icons custom"> yedekleme </i>	destek olmak
<i class = "material-icons custom"> kitap </i>	kitap
<i class = "material-icons custom"> yer işareti </i>	yer imi
<i class = "material-icons custom"> bookmark_border </i>	bookmark_border
<i class = "material-icons custom"> bug_report </i>	hata raporu
<i class = "material-icons custom"> inşa </i>	inşa etmek
<i class = "material-icons custom"> önbelleğe alındı </i>	önbelleğe alınmış
<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>	Tarihi değiştir
<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"> sınıf </i>	sınıf
<i class = "material-icons custom"> kod </i>	kodu
<i class = "material-icons custom"> credit_card </i>	kredi kartı
<i class = "material-icons custom"> gösterge tablosu </i>	Gösterge Paneli
<i class = "material-icons custom"> sil </i>	sil
<i class = "material-icons custom"> açıklama </i>	açıklama
<i class = "material-icons custom"> dns </i>	dns
<i class = "material-icons custom"> bitti </i>	bitti
<i class = "material-icons custom"> done_all </i>	done_all
<i class = "material-icons custom"> çıkar </i>	çıkarmak
<i class = "material-icons custom"> etkinlik </i>	Etkinlik
<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"> keşfedin </i>	keşfetmek
<i class = "material-icons custom"> uzantı </i>	uzantı
<i class = "material-icons custom"> yüz </i>	yüz
<i class = "material-icons custom"> favori </i>	favori
<i class = "material-icons custom"> Favorite_border </i>	Favorite_border
<i class = "material-icons custom"> geri bildirim </i>	geri bildirim
<i class = "material-icons custom"> find_in_page </i>	sayfada bul
<i class = "material-icons custom"> find_replace </i>	bul_değiştir
<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>	uygulamayı al
<i class = "material-icons custom"> gif </i>	gif
<i class = "material-icons custom"> derece </i>	derece
<i class = "material-icons custom"> group_work </i>	grup çalışması
<i class = "material-icons custom"> yardım </i>	Yardım
<i class = "material-icons custom"> help_outline </i>	help_outline
<i class = "material-icons custom"> vurgu_kapalı </i>	vurgulamak_kapalı
<i class = "material-icons custom"> geçmiş </i>	Tarih
<i class = "material-icons custom"> ana sayfa </i>	ev
<i class = "material-icons custom"> hourglass_empty </i>	kumsaati_boş
<i class = "material-icons custom"> kum saati_full </i>	kumsaati_full
<i class = "material-icons custom"> http </i>	http
<i class = "material-icons custom"> https </i>	https
<i class = "material-icons custom"> bilgi </i>	bilgi
<i class = "material-icons custom"> info_outline </i>	info_outline
<i class = "material-icons custom"> giriş </i>	giriş
<i class = "material-icons custom"> invert_colors </i>	invert_colors
<i class = "material-icons custom"> etiket </i>	etiket
<i class = "material-icons custom"> label_outline </i>	label_outline
<i class = "material-icons custom"> dil </i>	dil
<i class = "material-icons custom"> başlat </i>	başlatmak
<i class = "material-icons custom"> liste </i>	liste
<i class = "material-icons custom"> kilit </i>	kilit
<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"> bağlılık </i>	sadakat
<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>	tarayıcıda aç
<i class = "material-icons custom"> open_in_new </i>	open_in_new
<i class = "material-icons custom"> open_with </i>	Bununla aç
<i class = "material-icons custom"> sayfa görüntüleme </i>	sayfa görünümü
<i class = "material-icons custom"> ödeme </i>	ödeme
<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"> kalıcı kimlik </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>	fotoğraf içinde fotoğraf
<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"> yazdır </i>	Yazdır
<i class = "material-icons custom"> query_builder </i>	Sorgu oluşturucu
<i class = "material-icons custom"> question_answer </i>	soru cevap
<i class = "material-icons custom"> makbuz </i>	fiş
<i class = "material-icons custom"> kullan </i>	tazmin etmek
<i class = "material-icons custom"> yeniden sırala </i>	yeniden sıralama
<i class = "material-icons custom"> report_problem </i>	report_problem
<i class = "material-icons custom"> geri yükle </i>	onarmak
<i class = "material-icons custom"> oda </i>	oda
<i class = "material-icons custom"> program </i>	program
<i class = "material-icons custom"> arama </i>	arama
<i class = "material-icons custom"> ayarlar </i>	ayarlar
<i class = "material-icons custom"> settings_applications </i>	settings_applications
<i class = "material-icons custom"> settings_bluetooth </i>	settings_bluetooth
<i class = "material-icons custom"> settings_brightness </i>	settings_brightness
<i class = "material-icons custom"> settings_cell </i>	settings_cell
<i class = "material-icons custom"> settings_ethernet </i>	settings_ethernet
<i class = "material-icons custom"> settings_input_antenna </i>	settings_input_antenna
<i class = "material-icons custom"> settings_input_component </i>	settings_input_component
<i class = "material-icons custom"> settings_input_hdmi </i>	settings_input_hdmi
<i class = "material-icons custom"> settings_input_svideo </i>	settings_input_svideo
<i class = "material-icons custom"> settings_overscan </i>	settings_overscan
<i class = "material-icons custom"> settings_phone </i>	settings_phone
<i class = "material-icons custom"> settings_power </i>	settings_power
<i class = "material-icons custom"> settings_remote </i>	settings_remote
<i class = "material-icons custom"> settings_voice </i>	settings_voice
<i class = "material-icons custom"> alışveriş </i>	Dükkan
<i class = "material-icons custom"> shop_two </i>	shop_two
<i class = "material-icons custom"> shopping_basket </i>	Alışveriş sepeti
<i class = "material-icons custom"> shopping_cart </i>	alışveriş kartı
<i class = "material-icons custom"> speaker_notes </i>	speaker_notes
<i class = "material-icons custom"> yazım denetimi </i>	yazım denetimi
<i class = "material-icons custom"> star_rate </i>	star_rate
<i class = "material-icons custom"> yıldızlar </i>	yıldızlar
<i class = "material-icons custom"> mağaza </i>	mağaza
<i class = "material-icons custom"> konu </i>	konu
<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"> sekme </i>	sekme
<i class = "material-icons custom"> tab_unselected </i>	tab_unselected
<i class = "material-icons custom"> sinemalar </i>	tiyatrolar
<i class = "material-icons custom"> thumb_down </i>	thumb_down
<i class = "material-icons custom"> thumb_up </i>	başparmak yukarı
<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"> bugün </i>	bugün
<i class = "material-icons custom"> geçiş ücreti </i>	Geçiş ücreti
<i class = "material-icons custom"> track_changes </i>	parça değişiklikleri
<i class = "material-icons custom"> çevir </i>	Çevirmek
<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>	döndü
<i class = "material-icons custom"> doğrulanmış_kullanıcı </i>	doğrulanmış_kullanıcı
<i class = "material-icons custom"> view_agenda </i>	view_agenda
<i class = "material-icons custom"> view_array </i>	görünüm_dizisi
<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"> görünürlük </i>	görünürlük
<i class = "material-icons custom"> visibility_off </i>	visibility_off
<i class = "material-icons custom"> çalışma </i>	iş
<i class = "material-icons custom"> youtube_searched_for </i>	youtube_searched_for
<i class = "material-icons custom"> zoom_in </i>	Yakınlaştır
<i class = "material-icons custom"> zoom_out </i>	uzaklaştırmak

Bu bölüm, Google'ın (Malzeme) Uyarı simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Google'ın (Malzeme) Uyarı simgelerinin kullanımını ve sonuçlarını içerir. İlgili çıktıları almak için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "material-icons custom"> add_alert </i>	add_alert
<i class = "material-icons custom"> hatası </i>	hata
<i class = "material-icons custom"> error_outline </i>	error_outline
<i class = "material-icons custom"> uyarı </i>	uyarı

Bu bölüm, Google'ın (Materyal) AV simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Google'ın (Materyal) AV simgelerinin kullanımını ve sonuçlarını içerir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "material-icons custom"> airplay </i>	hava oyunu
<i class = "material-icons custom"> albüm </i>	albüm
<i class = "material-icons custom"> av_timer </i>	av_timer
<i class = "material-icons custom"> closed_caption </i>	Kapalı başlık
<i class = "material-icons custom"> ekolayzer </i>	ekolayzer
<i class = "material-icons custom"> açık </i>	açık
<i class = "material-icons custom"> fast_forward </i>	ileri sar
<i class = "material-icons custom"> fast_rewind </i>	fast_rewind
<i class = "material-icons custom"> forward_10 </i>	forward_10
<i class = "material-icons custom"> forward_30 </i>	forward_30
<i class = "material-icons custom"> forward_5 </i>	forward_5
<i class = "material-icons custom"> oyunlar </i>	oyunlar
<i class = "material-icons custom"> hd </i>	hd
<i class = "material-icons custom"> işitme </i>	işitme
<i class = "material-icons custom"> yüksek_kalite </i>	yüksek kalite
<i class = "material-icons custom"> library_add </i>	library_add
<i class = "material-icons custom"> library_books </i>	kütüphane kitapları
<i class = "material-icons custom"> library_music </i>	library_music
<i class = "material-icons custom"> döngü </i>	döngü
<i class = "material-icons custom"> mikrofon </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"> yeni_sürümler </i>	Yeni sürümler
<i class = "material-icons custom"> not_interested </i>	ilgilenmiyorum
<i class = "material-icons custom"> duraklat </i>	Duraklat
<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"> kuyruk </i>	sıra
<i class = "material-icons custom"> queue_music </i>	queue_music
<i class = "material-icons custom"> radyo </i>	radyo
<i class = "material-icons custom"> Recent_actors </i>	Recent_actors
<i class = "material-icons custom"> tekrarla </i>	tekrar et
<i class = "material-icons custom"> tekrar_biri </i>	tekrar_biri
<i class = "material-icons custom"> yeniden oynat </i>	tekrar oynatmak
<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"> karıştır </i>	Karıştır
<i class = "material-icons custom"> skip_next </i>	bir sonraki
<i class = "material-icons custom"> skip_previous </i>	skip_previous
<i class = "material-icons custom"> erteleme </i>	uyuklama
<i class = "material-icons custom"> sort_by_alpha </i>	sort_by_alpha
<i class = "material-icons custom"> durdur </i>	Dur
<i class = "material-icons custom"> altyazılar </i>	altyazılar
<i class = "material-icons custom"> surround_sound </i>	surround_sound
<i class = "material-icons custom"> video_library </i>	video_library
<i class = "material-icons custom"> video kamera </i>	video kamera
<i class = "material-icons custom"> videocam_off </i>	videocam_off
<i class = "material-icons custom"> volume_down </i>	sesi kıs
<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>	sesi aç
<i class = "material-icons custom"> web </i>	ağ

Bu bölüm, Google'ın (Materyal) İletişim simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Google'ın (Materyal) İletişim simgelerinin kullanımını ve sonuçlarını içermektedir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "material-icons custom"> iş </i>	iş
<i class = "material-icons custom"> çağrı </i>	aramak
<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">chat</i>	chat
<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>	clear_all
<i class="material-icons custom">comment</i>	comment
<i class="material-icons custom">contact_phone</i>	contact_phone
<i class="material-icons custom">contacts</i>	contacts
<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>	import_export
<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">message</i>	message
<i class="material-icons custom">no_sim</i>	no_sim
<i class="material-icons custom">phone</i>	phone
<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">textsms</i>	textsms
<i class="material-icons custom">voicemail</i>	voicemail
<i class="material-icons custom">vpn_key</i>	vpn_key
<i class="material-icons custom">email</i>	email
<i class="material-icons custom">call_end</i>	call_end

Bu bölüm, Google'ın (Materyal) İçerik simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Google'ın (Materyal) İçerik simgelerinin kullanımını ve sonuçlarını içermektedir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "material-icons custom"> ekle </i>	Ekle
<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"> arşiv </i>	Arşiv
<i class = "material-icons custom"> geri tuşu </i>	geri tuşu
<i class = "material-icons custom"> blok </i>	blok
<i class = "material-icons custom"> temizle </i>	açık
<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"> oluştur </i>	oluşturmak
<i class = "material-icons custom"> taslaklar </i>	taslaklar
<i class = "material-icons custom"> filter_list </i>	filter_list
<i class = "material-icons custom"> bayrak </i>	bayrak
<i class = "material-icons custom"> font_download </i>	font_download
<i class = "material-icons custom"> yönlendir </i>	ileri
<i class = "material-icons custom"> hareket </i>	mimik
<i class = "material-icons custom"> gelen kutusu </i>	gelen kutusu
<i class = "material-icons custom"> bağlantı </i>	bağlantı
<i class = "material-icons custom"> posta </i>	posta
<i class = "material-icons custom"> markunread </i>	okunmadı olarak işaretle
<i class = "material-icons custom"> yeniden yap </i>	yeniden yapmak
<i class = "material-icons custom"> kaldır </i>	Kaldırmak
<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"> yanıtla </i>	cevap
<i class = "material-icons custom"> yanıtla_tüm </i>	hepsini cevapla
<i class = "material-icons custom"> raporu </i>	bildiri
<i class = "material-icons custom"> kaydet </i>	kayıt etmek
<i class = "material-icons custom"> select_all </i>	hepsini seç
<i class = "material-icons custom"> gönder </i>	göndermek
<i class = "material-icons custom"> sırala </i>	çeşit
<i class = "material-icons custom"> text_format </i>	Metin formatı
<i class = "material-icons custom"> stay_current_portrait </i>	stay_current_portrait
<i class = "material-icons custom"> geri al </i>	geri alma

Bu bölüm size Google'ın (Materyal) Aygıt Simgelerinin kullanımını sağlar. Varsayalım kicustom aşağıda gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Google'ın (Materyal) Cihaz Simgelerinin kullanımını ve sonuçlarını içermektedir.

Kullanım	Sonuç
<i class = "material-icons custom"> access_alarm </i>	access_alarm
<i class = "material-icons custom"> erişim_alarımları </i>	access_alarms
<i class = "material-icons custom"> erişim süresi </i>	erişim süresi
<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>	pil dolu
<i class = "material-icons custom"> battery_std </i>	battery_std
<i class = "material-icons custom"> battery_unknown </i>	battery_unknown
<i class = "material-icons custom"> 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_arama </i>	bluetooth_searching
<i class = "material-icons custom"> bright_auto </i>	Bright_auto
<i class = "material-icons custom"> bright_high </i>	parlaklık_yüksek
<i class = "material-icons custom"> bright_low </i>	parlaklık_düşük
<i class = "material-icons custom"> bright_medium </i>	Bright_medium
<i class = "material-icons custom"> data_usage </i>	Veri kullanımı
<i class = "material-icons custom"> geliştirici_modu </i>	Geliştirici modu
<i class = "material-icons custom"> cihazlar </i>	cihazlar
<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"> konum_arama </i>	konum arama
<i class = "material-icons custom"> network_cell </i>	network_cell
<i class = "material-icons custom"> network_wifi </i>	network_wifi
<i class = "material-icons custom"> screen_lock_landscape </i>	screen_lock_landscape
<i class = "material-icons custom"> screen_lock_portrait </i>	screen_lock_portrait
<i class = "material-icons custom"> screen_lock_rotation </i>	screen_lock_rotation
<i class = "material-icons custom"> screen_rotation </i>	screen_rotation
<i class = "material-icons custom"> sd_storage </i>	sd_storage
<i class = "material-icons custom"> settings_system_daydream </i>	settings_system_daydream
<i class = "material-icons custom"> signal_cellular_4_bar </i>	signal_cellular_4_bar
<i class = "material-icons custom"> wifi_tethering </i>	wifi_tethering
<i class = "material-icons custom"> signal_cellular_no_sim </i>	signal_cellular_no_sim
<i class = "material-icons custom"> signal_cellular_null </i>	signal_cellular_null
<i class = "material-icons custom"> signal_cellular_off </i>	signal_cellular_off
<i class = "material-icons custom"> signal_wifi_4_bar </i>	signal_wifi_4_bar
<i class = "material-icons custom"> signal_wifi_4_bar_lock </i>	signal_wifi_4_bar_lock
<i class = "material-icons custom"> signal_wifi_off </i>	signal_wifi_off
<i class = "material-icons custom"> depolama </i>	depolama
<i class = "material-icons custom"> usb </i>	USB
<i class = "material-icons custom"> duvar kağıdı </i>	duvar kağıdı
<i class = "material-icons custom"> widget'lar </i>	aletler
<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

Bu bölüm, Google'ın (Material) Editor simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Google'ın (Material) Editor simgelerinin kullanımını ve sonuçlarını içerir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "material-icons custom"> attach_file </i>	dosya eki
<i class = "material-icons custom"> attach_money </i>	attach_money
<i class = "material-icons custom"> border_all </i>	border_all
<i class = "material-icons custom"> border_bottom </i>	border_bottom
<i class = "material-icons custom"> border_clear </i>	border_clear
<i class = "material-icons custom"> border_color </i>	sınır rengi
<i class = "material-icons custom"> border_horizontal </i>	border_horizontal
<i class = "material-icons custom"> border_inner </i>	border_inner
<i class = "material-icons custom"> border_left </i>	border_left
<i class = "material-icons custom"> border_outer </i>	border_outer
<i class = "material-icons custom"> border_right </i>	border_right
<i class = "material-icons custom"> border_style </i>	border_style
<i class = "material-icons custom"> border_top </i>	border_top
<i class = "material-icons custom"> border_vertical </i>	border_vertical
<i class = "material-icons custom"> format_align_center </i>	format_align_center
<i class = "material-icons custom"> format_align_justify </i>	format_align_justify
<i class = "material-icons custom"> format_align_left </i>	format_align_left
<i class = "material-icons custom"> format_align_right </i>	format_align_right
<i class = "material-icons custom"> format_bold </i>	format_bold
<i class = "material-icons custom"> format_clear </i>	format_clear
<i class = "material-icons custom"> format_color_fill </i>	format_color_fill
<i class = "material-icons custom"> format_color_reset </i>	format_color_reset
<i class = "material-icons custom"> format_color_text </i>	format_color_text
<i class = "material-icons custom"> format_indent_decrease </i>	format_indent_decrease
<i class = "material-icons custom"> format_indent_increase </i>	format_indent_increase
<i class = "material-icons custom"> format_italic </i>	format_italic
<i class = "material-icons custom"> format_line_spacing </i>	format_line_spacing
<i class = "material-icons custom"> format_list_bulleted </i>	format_list_bulleted
<i class = "material-icons custom"> format_list_numbered </i>	format_list_numbered
<i class = "material-icons custom"> format_paint </i>	format_paint
<i class = "material-icons custom"> format_quote </i>	format_quote
<i class = "material-icons custom"> format_size </i>	format_size
<i class = "material-icons custom"> format_strikethrough </i>	format_strikethrough
<i class = "material-icons custom"> format_textdirection_l_to_r </i>	format_textdirection_l_to_r
<i class = "material-icons custom"> format_textdirection_r_to_l </i>	format_textdirection_r_to_l
<i class = "material-icons custom"> format_underline </i>	format_underline
<i class = "material-icons custom"> işlevler </i>	fonksiyonlar
<i class = "material-icons custom"> insert_chart </i>	insert_chart
<i class = "material-icons custom"> insert_comment </i>	insert_comment
<i class = "material-icons custom"> insert_drive_file </i>	insert_drive_file
<i class = "material-icons custom"> insert_emoticon </i>	insert_emoticon
<i class = "material-icons custom"> insert_invitation </i>	insert_invitation
<i class = "material-icons custom"> insert_link </i>	insert_link
<i class = "material-icons custom"> insert_foto </i>	insert_photo
<i class = "material-icons custom"> merge_type </i>	merge_type
<i class = "material-icons custom"> mode_comment </i>	mode_comment
<i class = "material-icons custom"> mode_edit </i>	mode_edit
<i class = "material-icons custom"> money_off </i>	money_off
<i class = "material-icons custom"> yayınla </i>	Yayınla
<i class = "material-icons custom"> space_bar </i>	space_bar
<i class = "material-icons custom"> strikethrough_s </i>	strikethrough_s
<i class = "material-icons custom"> vertical_align_bottom </i>	vertical_align_bottom
<i class = "material-icons custom"> vertical_align_center </i>	vertical_align_center
<i class = "material-icons custom"> vertical_align_top </i>	vertical_align_top
<i class = "material-icons custom"> wrap_text </i>	wrap_text

Bu bölüm, Google'ın (Materyal) Dosya simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Google'ın (Malzeme) Dosya simgelerinin kullanımını ve sonuçlarını içermektedir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "material-icons custom"> ek </i>	ek dosya
<i class = "material-icons custom"> bulut </i>	bulut
<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_indirme </i>	dosya indirme
<i class = "material-icons custom"> file_upload </i>	dosya yükleme
<i class = "material-icons custom"> klasör </i>	Klasör
<i class = "material-icons custom"> folder_open </i>	folder_open
<i class = "material-icons custom"> klasör paylaştı </i>	klasör paylaştı

Bu bölüm, Google'ın (Malzeme) Donanım simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Google'ın (Malzeme) Donanım simgelerinin kullanımını ve sonuçlarını içerir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "material-icons custom"> yayınlama </i>	oyuncular
<i class = "material-icons custom"> cast_connected </i>	cast_connected
<i class = "material-icons custom"> bilgisayar </i>	bilgisayar
<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"> yuva </i>	rıhtım
<i class = "material-icons custom"> oyun kumandası </i>	oyun kumandası
<i class = "material-icons custom"> kulaklık </i>	kulaklık
<i class = "material-icons custom"> headset_mic </i>	headset_mic
<i class = "material-icons custom"> klavye </i>	tuş takımı
<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"> dizüstü bilgisayar </i>	dizüstü bilgisayar
<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"> bellek </i>	hafıza
<i class = "material-icons custom"> fare </i>	fare
<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"> telefon bağlantısı </i>	telefon bağlantısı
<i class = "material-icons custom"> phonelink_off </i>	phonelink_off
<i class = "material-icons custom"> power_input </i>	güç girişi
<i class = "material-icons custom"> yönlendirici </i>	yönlendirici
<i class = "material-icons custom"> tarayıcı </i>	tarayıcı
<i class = "material-icons custom"> güvenlik </i>	güvenlik
<i class = "material-icons custom"> sim_card </i>	SIM kart
<i class = "material-icons custom"> akıllı telefon </i>	akıllı telefon
<i class = "material-icons custom"> hoparlör </i>	hoparlör
<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"> oyuncaklar </i>	oyuncaklar
<i class = "material-icons custom"> tv </i>	televizyon
<i class = "material-icons custom"> izle </i>	izlemek

Bu bölüm, Google'ın (Malzeme) Görüntü simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Google'ın (Materyal) Görsel simgelerinin kullanımını ve sonuçlarını içermektedir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "material-icons custom"> add_to_photos </i>	fotoğraflara_ ekle
<i class = "material-icons custom"> ayarla </i>	ayarlamak
<i class = "material-icons custom"> asistan </i>	asistan
<i class = "material-icons custom"> asistan </i>	asistan
<i class = "material-icons custom"> ses kaydı </i>	müzik parçası
<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"> parlaklık_1 </i>	parlaklık_1
<i class = "material-icons custom"> parlaklık_2 </i>	parlaklık_2
<i class = "material-icons custom"> bright_3 </i>	parlaklık_3
<i class = "material-icons custom"> bright_4 </i>	parlaklık_4
<i class = "material-icons custom"> bright_5 </i>	parlaklık_5
<i class = "material-icons custom"> bright_6 </i>	parlaklık_6
<i class = "material-icons custom"> bright_7 </i>	parlaklık_7
<i class = "material-icons custom"> broken_image </i>	Broken_image
<i class = "material-icons custom"> fırça </i>	fırça
<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"> koleksiyonlar </i>	koleksiyonlar
<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"> renklendirme </i>	renklendirmek
<i class = "material-icons custom"> karşılaştır </i>	karşılaştırmak
<i class = "material-icons custom"> kontrol_ noktası </i>	kontrol noktası
<i class = "material-icons custom"> control_point_duplicate </i>	control_point_duplicate
<i class = "material-icons custom"> kırp </i>	mahsul
<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"> puseti kaldırın </i>	perdesini kaldırmak
<i class = "material-icons custom"> ayrıntılar </i>	detaylar
<i class = "material-icons custom"> düzenle </i>	Düzenle
<i class = "material-icons custom"> pozlama </i>	maruziyet
<i class = "material-icons custom"> maruziyet_neg_1 </i>	maruziyet_neg_1
<i class = "material-icons custom"> maruziyet_plus_1 </i>	maruziyet_plus_1
<i class = "material-icons custom"> exposed_plus_2 </i>	maruziyet_plus_2
<i class = "material-icons custom"> maruziyet_ sıfır </i>	maruziyet_ sıfır
<i class = "material-icons custom"> filtre </i>	filtre
<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_frame'ler </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"> parlama </i>	parlama
<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"> çevir </i>	çevirmek
<i class = "material-icons custom"> gradyan </i>	gradyan
<i class = "material-icons custom"> tahıl </i>	tane
<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"> iyileştirme </i>	iyileştirme
<i class = "material-icons custom"> resim </i>	görüntü
<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"> manzara </i>	manzara
<i class = "material-icons custom"> leak_add </i>	leak_add
<i class = "material-icons custom"> leak_remove </i>	leak_remove
<i class = "material-icons custom"> lens </i>	lens
<i class = "material-icons custom"> görünümler </i>	görünüyor
<i class = "material-icons custom"> görünüm_3 </i>	görünüyor_3
<i class = "material-icons custom"> görünüm_4 </i>	görünüyor_4
<i class = "material-icons custom"> look_5 </i>	görünüyor_5
<i class = "material-icons custom"> look_6 </i>	görünüyor_6
<i class = "material-icons custom"> look_one </i>	look_one
<i class = "material-icons custom"> look_two </i>	look_two
<i class = "material-icons custom"> büyüteç </i>	büyüteç
<i class = "material-icons custom"> monokrom_fotoğraflar </i>	monokrom_fotoğraflar
<i class = "material-icons custom"> movie_creation </i>	movie_creation
<i class = "material-icons custom"> music_note </i>	müzik notası
<i class = "material-icons custom"> doğa </i>	doğa
<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"> navigate_next </i>	navigate_next
<i class = "material-icons custom"> navigate_before </i>	önce navigate
<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ğraf </i>	Fotoğraf
<i class = "material-icons custom"> photo_album </i>	fotoğraf albümü
<i class = "material-icons custom"> fotoğraf_kamera </i>	fotoğraf makinesi
<i class = "material-icons custom"> photo_library </i>	fotoğraf kütüphanesi
<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>	resim_as_pdf
<i class = "material-icons custom"> portre </i>	Vesika
<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>	sola dön
<i class = "material-icons custom"> rotate_right </i>	rotate_right
<i class = "material-icons custom"> slayt gösterisi </i>	slayt gösterisi
<i class = "material-icons custom"> düzelt </i>	düzeltmek
<i class = "material-icons custom"> stil </i>	stil
<i class = "material-icons custom"> switch_camera </i>	switch_camera
<i class = "material-icons custom"> switch_video </i>	switch_video
<i class = "material-icons custom"> tag_faces </i>	tag_faces
<i class = "material-icons custom"> doku </i>	doku
<i class = "material-icons custom"> zaman atlama </i>	zaman atlaması
<i class = "material-icons custom"> zamanlayıcı </i>	zamanlayıcı
<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>	kapalı zamanlayıcı
<i class = "material-icons custom"> tonalite </i>	renk uyumu
<i class = "material-icons custom"> dönüştürme </i>	dönüştürmek
<i class = "material-icons custom"> ince ayar </i>	akort etmek
<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>	vinyet
<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

Bu bölüm, Google'ın (Material) Maps simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Google'ın (Materyal) Haritalar simgelerinin kullanımını ve sonuçlarını içerir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "material-icons custom"> buradaydı </i>	buradaydı
<i class = "material-icons custom"> yönler </i>	talimatlar
<i class = "material-icons custom"> yol tarifi_bike </i>	yol tarifi
<i class = "material-icons custom"> direction_boat </i>	direction_boat
<i class = "material-icons custom"> yol tarifi_bus </i>	yol tarifi_bus
<i class = "material-icons custom"> direction_car </i>	direction_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"> yol tarifi_metrosu </i>	metro_yol tarifi
<i class = "material-icons custom"> direction_transit </i>	direction_transit
<i class = "material-icons custom"> direction_walk </i>	direction_walk
<i class = "material-icons custom"> uçuş </i>	uçuş
<i class = "material-icons custom"> otel </i>	otel
<i class = "material-icons custom"> katmanlar </i>	katmanlar
<i class = "material-icons custom"> layer_clear </i>	layer_clear
<i class = "material-icons custom"> local_activity </i>	local_activity
<i class = "material-icons custom"> local_airport </i>	local_airport
<i class = "material-icons custom"> local_atm </i>	local_atm
<i class = "material-icons custom"> local_bar </i>	local_bar
<i class = "material-icons custom"> local_cafe </i>	local_cafe
<i class = "material-icons custom"> local_car_wash </i>	local_car_wash
<i class = "material-icons custom"> local_convenience_store </i>	local_convenience_store
<i class = "material-icons custom"> local_yeme </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>	yerel hastane
<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>	yerel kütüphane
<i class = "material-icons custom"> local_mall </i>	local_mall
<i class = "material-icons custom"> local_filmler </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>	Yerel posta ofisi
<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"> harita </i>	harita
<i class = "material-icons custom"> konumum </i>	benim konumum
<i class = "material-icons custom"> gezinme </i>	navigasyon
<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"> yer </i>	yer
<i class = "material-icons custom"> rate_review </i>	Oran incelemesi
<i class = "material-icons custom"> restaurant_menu </i>	restoran menüsü
<i class = "material-icons custom"> uydu </i>	uydu
<i class = "material-icons custom"> store_mall_directory </i>	store_mall_directory
<i class = "material-icons custom"> trafik </i>	trafik
<i class = "material-icons custom"> arazi </i>	arazi

Bu bölüm, Google'ın (Malzeme) Gezinme simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Google'ın (Materyal) Gezinme simgelerinin kullanımını ve sonuçlarını içerir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "material-icons custom"> uygulamalar </i>	uygulamalar
<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"> iptal </i>	iptal etmek
<i class = "material-icons custom"> kontrol </i>	Kontrol
<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"> kapat </i>	kapat
<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"> tam ekran </i>	Tam ekran
<i class = "material-icons custom"> fullscreen_exit </i>	fullscreen_exit
<i class = "material-icons custom"> menü </i>	Menü
<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"> yenile </i>	yenilemek

Bu bölüm, Google'ın (Materyal) Bildirim simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Google'ın (Materyal) Bildirim simgelerinin kullanımını ve sonuçlarını içermektedir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "material-icons özel"> 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>	onay numarası
<i class = "material-icons custom"> disc_full </i>	disc_full
<i class = "material-icons custom"> do_not_disturb </i>	rahatsız etmeyin
<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>	canlı tv
<i class = "material-icons custom"> mms </i>	mms
<i class = "material-icons custom"> daha fazla </i>	Daha
<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"> kişisel_video </i>	kişisel_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"> güç </i>	güç
<i class = "material-icons custom"> sd_card </i>	hafıza kartı
<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"> senkronizasyon </i>	eşitleme
<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>	sistem güncellemesi
<i class = "material-icons custom"> tap_and_play </i>	tap_and_play
<i class = "material-icons custom"> time_to_leave </i>	ayrılık vakti
<i class = "material-icons custom"> titreşim </i>	titreşim
<i class = "material-icons custom"> voice_chat </i>	sesli sohbet
<i class = "material-icons custom"> vpn_lock </i>	vpn_lock
<i class = "material-icons custom"> wc </i>	tuvalet
<i class = "material-icons custom"> wifi </i>	kablosuz internet

Bu bölüm, Google'ın (Materyal) Sosyal simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Google'ın (Materyal) Sosyal simgelerinin kullanımını ve sonuçlarını içermektedir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "material-icons custom"> pasta </i>	kek
<i class = "material-icons custom"> etki alanı </i>	alan adı
<i class = "material-icons custom"> grup </i>	grup
<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"> ruh hali </i>	ruh hali
<i class = "material-icons custom"> mood_bad </i>	mood_bad
<i class = "material-icons custom"> bildirimler </i>	bildirimler
<i class = "material-icons custom"> bildirimler_aktif </i>	bildirimler_aktif
<i class = "material-icons custom"> notification_none </i>	notification_none
<i class = "material-icons custom"> notification_off </i>	bildirimler_kapalı
<i class = "material-icons custom"> bildirimler_ duraklatıldı </i>	bildirimler_ duraklatıldı
<i class = "material-icons custom"> sayfalar </i>	sayfaları
<i class = "material-icons custom"> party_mode </i>	Parti modu
<i class = "material-icons custom"> insanlar </i>	insanlar
<i class = "material-icons custom"> people_outline </i>	people_outline
<i class = "material-icons custom"> kişi </i>	kişi
<i class = "material-icons custom"> person_add </i>	person_add
<i class = "material-icons custom"> person_outline </i>	person_outline
<i class = "material-icons custom"> plus_one </i>	artı bir
<i class = "material-icons custom"> anket </i>	anket
<i class = "material-icons custom"> genel </i>	halka açık
<i class = "material-icons custom"> okul </i>	okul
<i class = "material-icons custom"> paylaş </i>	Paylaş
<i class = "material-icons custom"> whatshot </i>	ne oldu

Bu bölüm, Google'ın (Material) Toggle simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Google'ın (Material) Toggle simgelerinin kullanımını ve sonuçlarını içermektedir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<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"> yıldız </i>	star
<i class = "material-icons custom"> star_border </i>	star_border
<i class = "material-icons custom"> star_half </i>	star_half

Bu, raster görüntü biçimlerinde, vektör görüntü biçimlerinde ve yazı tipi olarak kullanılabilen tek renkli simgelerden oluşan bir kitaplıktır. Yazı tipi biçiminde 250'den fazla glif sağlar. Bu yazı tiplerini web projelerinizde kullanabilirsiniz. Bu glifler ücretsiz değildir, ancak onları Bootstrap tabanlı projelerde kullanmanız durumunda herhangi bir harcama yapmanız gerekmiyorsa.

Yazı Tipini Yükleme (kitaplık)

Bootstrap Glyphicons kitaplığını yüklemek için, aşağıdaki satırı kopyalayıp web sayfasının <head> bölümüne yapıştırın.

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

Simgeyi Kullanma

Bootstrap Glyphicons bir dizi simge sağlar. Bunlardan birini seçin ve simge sınıfının adını <body> etiketi içindeki herhangi bir HTML öğesine ekleyin. Aşağıdaki örnekte, ağacın simgesini kullandık ve sınıf adıtree-deciduous.

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

Aşağıdaki çıktıyı üretecektir -

Boyutu Tanımlamak

CSS'de boyutunu tanımlayarak ve aşağıda gösterildiği gibi sınıf adıyla birlikte kullanarak bir simgenin boyutunu artırabilir veya azaltabilirsiniz. Aşağıdaki örnekte boyutu 6 em olarak tanımladık.

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

Aşağıdaki çıktıyı üretecektir:

Rengi Tanımlamak

CSS'yi kullanarak bir simgenin rengini tanımlayabilirsiniz. Aşağıdaki örnek örnek, ağaç simgesinin renginin nasıl değiştirileceğini gösterir.

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

Aşağıdaki çıktıyı üretecektir -

Bu bölümde Bootstrap Glyphicons'un (Bileşenler) kullanımı açıklanmaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

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

Aşağıdaki tablo, Bootstrap Glyphicons'un (Bileşenler) kullanımını ve sonuçlarını içerir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "glyphicon glyphicon-asterisk özel"> </i>
<i class = "glyphicon glyphicon-plus özel"> </i>
<i class = "glyphicon glyphicon-euro özel"> </i>
<i class = "glyphicon glyphicon-minus özel"> </i>
<i class = "glyphicon glyphicon-cloud özel"> </i>
<i class = "glyphicon glyphicon-envelope özel"> </i>
<i class = "glyphicon glyphicon-pencil özel"> </i>
<i class = "glyphicon glyphicon-glass özel"> </i>
<i class = "glyphicon glyphicon-music özel"> </i>
<i class = "glyphicon glyphicon-search özel"> </i>
<i class = "glyphicon glyphicon-heart özel"> </i>
<i class = "glyphicon glyphicon-star özel"> </i>
<i class = "glyphicon glyphicon-star-empty özel"> </i>
<i class = "glyphicon glyphicon-kullanıcı özel"> </i>
<i class = "glyphicon glyphicon-film özel"> </i>
<i class = "glyphicon glyphicon-th-large özel"> </i>
<i class = "glyphicon glyphicon-th özel"> </i>
<i class = "glyphicon glyphicon-th-list özel"> </i>
<i class = "glyphicon glyphicon-ok özel"> </i>
<i class = "glyphicon glyphicon-remove özel"> </i>
<i class = "glyphicon glyphicon-zoom-in özel"> </i>
<i class = "glyphicon glyphicon-zoom-out özel"> </i>
<i class = "glyphicon glyphicon-off özel"> </i>
<i class = "glyphicon glyphicon-signal özel"> </i>
<i class = "glyphicon glyphicon-cog özel"> </i>
<i class = "glyphicon glyphicon-trash özel"> </i>
<i class = "glyphicon glyphicon-home özel"> </i>
<i class = "glyphicon glyphicon-file özel"> </i>
<i class = "glyphicon glyphicon-time özel"> </i>
<i class = "glyphicon glyphicon-road özel"> </i>
<i class = "glyphicon glyphicon-download-alt özel"> </i>
<i class = "glyphicon glyphicon-indir özel"> </i>
<i class = "glyphicon glyphicon-upload özel"> </i>
<i class = "glyphicon glyphicon-gelen kutusu özel"> </i>
<i class = "glyphicon glyphicon-play-circle özel"> </i>
<i class = "glyphicon glyphicon-tekrar özel"> </i>
<i class = "glyphicon glyphicon-refresh özel"> </i>
<i class = "glyphicon glyphicon-list-alt özel"> </i>
<i class = "glyphicon glyphicon-lock özel"> </i>
<i class = "glyphicon glyphicon-flag özel"> </i>
<i class = "glyphicon glyphicon-kulaklıklar özel"> </i>
<i class = "glyphicon glyphicon-hacim-kapalı özel"> </i>
<i class = "glyphicon glyphicon-sesi kısma özel"> </i>
<i class = "glyphicon glyphicon-sesi artır özel"> </i>
<i class = "glyphicon glyphicon-qrcode özel"> </i>
<i class = "glyphicon glyphicon-barcode özel"> </i>
<i class = "glyphicon glyphicon-tag özel"> </i>
<i class = "glyphicon glyphicon-etiketleri özel"> </i>
<i class = "glyphicon glyphicon-book özel"> </i>
<i class = "glyphicon glyphicon-yer işareti özel"> </i>
<i class = "glyphicon glyphicon-print özel"> </i>
<i class = "glyphicon glyphicon-camera özel"> </i>
<i class = "glyphicon glyphicon-font özel"> </i>
<i class = "glyphicon glyphicon-bold özel"> </i>
<i class = "glyphicon glyphicon-italic özel"> </i>
<i class = "glyphicon glyphicon-text-height özel"> </i>
<i class = "glyphicon glyphicon-text-width özel"> </i>
<i class = "glyphicon glyphicon-align-left özel"> </i>
<i class = "glyphicon glyphicon-align-center özel"> </i>
<i class = "glyphicon glyphicon-align-right özel"> </i>
<i class = "glyphicon glyphicon-hizala-yasla özel"> </i>
<i class = "glyphicon glyphicon-list özel"> </i>
<i class = "glyphicon glyphicon-indent-left özel"> </i>
<i class = "glyphicon glyphicon-indent-right özel"> </i>
<i class = "glyphicon glyphicon-facetime-video özel"> </i>
<i class = "glyphicon glyphicon-resim özel"> </i>
<i class = "glyphicon glyphicon-map-marker özel"> </i>
<i class = "glyphicon glyphicon-ayarlı özel"> </i>
<i class = "glyphicon glyphicon-tint özel"> </i>
<i class = "glyphicon glyphicon-edit özel"> </i>
<i class = "glyphicon glyphicon-share özel"> </i>
<i class = "glyphicon glyphicon-check özel"> </i>
<i class = "glyphicon glyphicon-move özel"> </i>
<i class = "glyphicon glyphicon-adım-geriye özel"> </i>
<i class = "glyphicon glyphicon-hızlı-geriye özel"> </i>
<i class = "glyphicon glyphicon-geriye dönük özel"> </i>
<i class = "glyphicon glyphicon-play özel"> </i>
<i class = "glyphicon glyphicon-özel pause"> </i>
<i class = "glyphicon glyphicon-stop özel"> </i>
<i class = "glyphicon glyphicon-ileri özel"> </i>
<i class = "glyphicon glyphicon-ileri sar özel"> </i>
<i class = "glyphicon glyphicon-ileri adım özel"> </i>
<i class = "glyphicon glyphicon-eject özel"> </i>
<i class = "glyphicon glyphicon-chevron-left özel"> </i>
<i class = "glyphicon glyphicon-chevron-right özel"> </i>
<i class = "glyphicon glyphicon-plus-sign özel"> </i>
<i class = "glyphicon glyphicon-minus-sign özel"> </i>
<i class = "glyphicon glyphicon-remove-sign özel"> </i>
<i class = "glyphicon glyphicon-ok-sign özel"> </i>
<i class = "glyphicon glyphicon-soru-işareti özel"> </i>
<i class = "glyphicon glyphicon-info-sign özel"> </i>
<i class = "glyphicon glyphicon-screenshot özel"> </i>
<i class = "glyphicon glyphicon-remove-circle özel"> </i>
<i class = "glyphicon glyphicon-ok-circle özel"> </i>
<i class = "glyphicon glyphicon-ban-circle özel"> </i>
<i class = "glyphicon glyphicon-arrow-left özel"> </i>
<i class = "glyphicon glyphicon-arrow-right özel"> </i>
<i class = "glyphicon glyphicon-arrow-up özel"> </i>
<i class = "glyphicon glyphicon-arrow-down özel"> </i>
<i class = "glyphicon glyphicon-share-alt özel"> </i>
<i class = "glyphicon glyphicon-resize-full özel"> </i>
<i class = "glyphicon glyphicon-resize-small özel"> </i>
<i class = "glyphicon glyphicon-exclamation-sign özel"> </i>
<i class = "glyphicon glyphicon-gift özel"> </i>
<i class = "glyphicon glyphicon-leaf özel"> </i>
<i class = "glyphicon glyphicon-fire özel"> </i>
<i class = "glyphicon glyphicon-eye-open özel"> </i>
<i class = "glyphicon glyphicon-göz-kapat özel"> </i>
<i class = "glyphicon glyphicon-warning-sign özel"> </i>
<i class = "glyphicon glyphicon-plane özel"> </i>
<i class = "glyphicon glyphicon-takvim özel"> </i>
<i class = "glyphicon glyphicon-random özel"> </i>
<i class = "glyphicon glyphicon-comment özel"> </i>
<i class = "glyphicon glyphicon-magnet özel"> </i>
<i class = "glyphicon glyphicon-chevron-up özel"> </i>
<i class = "glyphicon glyphicon-chevron-down özel"> </i>
<i class = "glyphicon glyphicon-retweet özel"> </i>
<i class = "glyphicon glyphicon-shopping-cart özel"> </i>
<i class = "glyphicon glyphicon-klasör-kapat özel"> </i>
<i class = "glyphicon glyphicon-klasör-aç özel"> </i>
<i class = "glyphicon glyphicon-resize-vertical özel"> </i>
<i class = "glyphicon glyphicon-resize-horizontal özel"> </i>
<i class = "glyphicon glyphicon-hdd özel"> </i>
<i class = "glyphicon glyphicon-bullhorn özel"> </i>
<i class = "glyphicon glyphicon-bell özel"> </i>
<i class = "glyphicon glyphicon-sertifika özel"> </i>
<i class = "glyphicon glyphicon-başparmak-yukarı özel"> </i>
<i class = "glyphicon glyphicon-başparmak aşağı özel"> </i>
<i class = "glyphicon glyphicon-el-sağ özel"> </i>
<i class = "glyphicon glyphicon-hand-left özel"> </i>
<i class = "glyphicon glyphicon-hand-up özel"> </i>
<i class = "glyphicon glyphicon-teslim özel"> </i>
<i class = "glyphicon glyphicon-circle-arrow-right özel"> </i>
<i class = "glyphicon glyphicon-circle-arrow-left özel"> </i>
<i class = "glyphicon glyphicon-circle-arrow-up özel"> </i>
<i class = "glyphicon glyphicon-circle-arrow-down özel"> </i>
<i class = "glyphicon glyphicon-glob özel"> </i>
<i class = "glyphicon glyphicon-wrench özel"> </i>
<i class = "glyphicon glyphicon-görevler özel"> </i>
<i class = "glyphicon glyphicon-filter özel"> </i>
<i class = "glyphicon glyphicon-evrak çantası özel"> </i>
<i class = "glyphicon glyphicon-fullscreen özel"> </i>
<i class = "glyphicon glyphicon-dashboard özel"> </i>
<i class = "glyphicon glyphicon-paperclip özel"> </i>
<i class = "glyphicon glyphicon-heart-empty özel"> </i>
<i class = "glyphicon glyphicon-link özel"> </i>
<i class = "glyphicon glyphicon-phone özel"> </i>
<i class = "glyphicon glyphicon-pushpin özel"> </i>
<i class = "glyphicon glyphicon-usd özel"> </i>
<i class = "glyphicon glyphicon-gbp özel"> </i>
<i class = "glyphicon glyphicon-sort özel"> </i>
<i class = "glyphicon glyphicon-alfabeye göre-sırala özel"> </i>
<i class = "glyphicon glyphicon-alfabeye göre-alt özel"> </i>
<i class = "glyphicon glyphicon-sırayla özel"> </i>
<i class = "glyphicon glyphicon-sıraya göre-alt özel"> </i>
<i class = "glyphicon glyphicon-özniteliklere göre sırala özel"> </i>
<i class = "glyphicon glyphicon-özniteliklere göre sırala-alt özel"> </i>
<i class = "glyphicon glyphicon-işaretlenmemiş özel"> </i>
<i class = "glyphicon glyphicon-genişleme özel"> </i>
<i class = "glyphicon glyphicon-daralt-aşağı özel"> </i>
<i class = "glyphicon glyphicon-daralt-up özel"> </i>
<i class = "glyphicon glyphicon-log-in özel"> </i>
<i class = "glyphicon glyphicon-flash özel"> </i>
<i class = "glyphicon glyphicon-log-out özel"> </i>
<i class = "glyphicon glyphicon-yeni-pencere özel"> </i>
<i class = "glyphicon glyphicon-kayıt özel"> </i>
<i class = "glyphicon glyphicon-özel kaydet"> </i>
<i class = "glyphicon glyphicon-open özel"> </i>
<i class = "glyphicon glyphicon ile kaydedilmiş özel"> </i>
<i class = "glyphicon glyphicon-import özel"> </i>
<i class = "glyphicon glyphicon-export özel"> </i>
<i class = "glyphicon glyphicon-send özel"> </i>
<i class = "glyphicon glyphicon-floppy-disk özel"> </i>
<i class = "glyphicon glyphicon-floppy ile kaydedilmiş özel"> </i>
<i class = "glyphicon glyphicon-floppy-remove özel"> </i>
<i class = "glyphicon glyphicon-floppy-özel kaydet"> </i>
<i class = "glyphicon glyphicon-floppy-open özel"> </i>
<i class = "glyphicon glyphicon-kredi-kartı özel"> </i>
<i class = "glyphicon glyphicon-transfer özel"> </i>
<i class = "glyphicon glyphicon-çatal bıçak takımı özel"> </i>
<i class = "glyphicon glyphicon-header özel"> </i>
<i class = "glyphicon glyphicon ile sıkıştırılmış özel"> </i>
<i class = "glyphicon glyphicon-earphone özel"> </i>
<i class = "glyphicon glyphicon-phone özel"> </i>
<i class = "glyphicon glyphicon-tower özel"> </i>
<i class = "glyphicon glyphicon-stats özel"> </i>
<i class = "glyphicon glyphicon-sd-video özel"> </i>
<i class = "glyphicon glyphicon-hd-video özel"> </i>
<i class = "glyphicon glyphicon-altyazılar özel"> </i>
<i class = "glyphicon glyphicon-sound-stereo özel"> </i>
<i class = "glyphicon glyphicon-sound-dolby özel"> </i>
<i class = "glyphicon glyphicon-sound-5-1 özel"> </i>
<i class = "glyphicon glyphicon-sound-6-1 özel"> </i>
<i class = "glyphicon glyphicon-sound-7-1 özel"> </i>
<i class = "glyphicon glyphicon-copyright-mark özel"> </i>
<i class = "glyphicon glyphicon-kayıt-mark özel"> </i>
<i class = "glyphicon glyphicon-cloud-indir özel"> </i>
<i class = "glyphicon glyphicon-cloud-upload özel"> </i>
<i class = "glyphicon glyphicon-ağaç-kozalaklı özel"> </i>
<i class = "glyphicon glyphicon-ağaç yaprak döken özel"> </i>