Web Sayfalarına İkon Nasıl Eklenir?
Web sayfalarına ikon eklemek istediğimizde sıklıkla <span> veya <i> gibi satır içi elementlerden yararlanırız. Ancak ikon eklemenin en basit ve sıklıkla tercih edilen yollarından biri, ikon kütüphanelerini kullanmaktır. Mevcut pek çok ikon kütüphanesi arasında, Font Awesome, popülerliği ve geniş ikon yelpazesi ile öne çıkmaktadır. Bu site sayesinde birçok ikona kolaylıkla erişebilir ve web projelerinizde hızla kullanabilirsiniz.
İkonlar bilgisayar ortamında kullanılan grafiksel ögelerdir. Örnek vermek gerekirse bilgisayarınızdaki programlara ait simgeler birer ikondur. CSS ile HTML dökümanlarına ikon eklemek ve bunları stillerine müdahale etmek mümkündür.
Font AweSome İkonlarını Web Sayfasına Eklemek
Web sayfalarına ikon eklemenin en yaygın kullanılan yolu olan Font Awesome ikonlarını kullanabilmek için öncelikle Font Awesome CSS kütüphanesine ilgili web sayfasından link vermelisiniz.
Bunun için herhangi bir yükleme yapmanıza gerek yok sadece HTML sayfanızın <head> bölümüne aşağıdaki kodu yerleştirmeniz yeterlidir:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">Bunu yaptıktan sonra artık ikonları kullanabiliriz. Bunu yapmak için ikonları HTML içerisinde aşağıdaki gibi ekleriz:
<i class="fas fa-user"></i>
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Google İkonlarını Web Sayfasına Ekleme
Bizzat Google tarafından hazırlanan Google ikonları da diğer iki kütüphanemiz gibi herhangi bir indirme yapmadan yalnızca ilgili web sayfasının <head> bölümüne aşağıdaki kod eklenerek kullanabileceğiniz bir ikon kütüphanesidir. Bakınız:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
SVG İkonlar Kullanmak
SVG dosyalarını direkt olarak HTML kodumuza ekleyebilir veya img etiketiyle bunları kullanabiliriz:
<img src="ikon_yolu.svg" alt="ikon">Özetle, kullanmak istediğiniz ikonun türüne ve karmaşıklığına bağlı olarak farklı yöntemleri kullanabilirsiniz.