Önceden yüklenmiş Material simge yazı tipini kullanarak DevSite sayfasındaki herhangi bir metne simge ekleyebilirsiniz . Bir düğmeden bahsederken düğme simgelerini de kullanabilirsiniz.
Materyal simgeleri
DevSite sayfasında metninize satır içi bir Material simgesi eklemek için:
- https://fonts.google.com/icons (go/icons değil) adresine gidin.
- Malzeme simgelerini ara kutusunda istediğiniz simgeyi arayın.
- Kullanım bilgilerini görmek için simgeyi tıklayın.
- Kullanım bilgileri panelinin Simge yazı tipi bölümünde, ikinci kod bloğundaki simgenin adını kopyalayın.
Simgeyi eklemek için aşağıdakileri metninize kopyalayın:
<span class="material-icons">ICON_NAME</span>Simgenin rengini (veya gerekirse boyutunu) değiştirmek için
styleözelliğini kullanın.
Örnek
Aşağıdaki kod, "Belirli bir etkinlikle ilgili ayrıntıları görüntülemek için genişletici oku tıklayın." metnini oluşturur.
To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.
<span> yerine <i> kullanabilirsiniz. Her iki etiket de kullanılabilir ancak span, anlamsal olarak daha doğrudur. Örneğin, "delete Sil Sil'i tıklayın" için aşağıdaki kodu kullanabilirsiniz:
Click <i class="material-icons">delete</i> <b>Delete</b>.
DevSite, class="material-icons" içeren her öğeye aria-hidden="true" ve translate="no" özelliklerini ekler. Bu işlem, erişim ağacından gereksiz öğeleri kaldırarak ekran okuyucular için daha iyi bir kullanıcı deneyimi sağlar ve simgenin adının yanlış çevrilmesini önler.
Düğme simgeleri
Düğme simgesi kullanılan bir prosedürü belgelerken <img> etiketine class="inline-icon" ekleyin. Daha fazla bilgi için düğmeler ve simgeler için stil kılavuzuna bakın.
Örnek
Aşağıdaki kod, "
Proje Oluştur'u tıklayın." metnini oluşturur.
Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.