HTML Websites için İkon Nasıl Eklenir?
İçindekiler 📚
- Giriş
- İkon Ekleme
- İkon Kütüphaneleri
- Flat Icon Kullanımı
- Font Awesome Kullanımı
- Flat Icon Kullanımı
- Sosyal Medya İkonları Ekleme
- İkon Boyutunu Değiştirme
- İkon Rengini Değiştirme
- İkonları Web Sayfasına Eklemek
- Font Awesome Kullanımı
- İkon Yükleme ve Linkleme
- İkonu Web Sayfasına Eklemek
- İkon Stillerini Değiştirme
- İkonlara Hover Efekti Ekleme
- Sonuç
- Sık Sorulan Sorular (FAQ)
Giriş
Bu video içerisinde, HTML sayfanıza nasıl simgeler ekleyeceğinizi ve ihtiyaç duyulduğunda nasıl stil verebileceğinizi göreceksiniz. HTML'de simge kullanmak için Font Awesome veya Flat Icon gibi bir kütüphane kullanmanız gerekmektedir. Bu videoda bu kütüphaneleri nasıl kullanacağınızı ve aralarındaki temel farkları göstereceğim, böylece projeniz için daha iyi bir karar verebilirsiniz. Lütfen videonun sonuna kadar dikkatlice izleyin.
İkon Ekleme
İkon Kütüphaneleri
İşte HTML sayfanıza simgeler eklemek için kullanabileceğiniz iki popüler kütüphane:
-
Flat Icon: Bu kütüphane, birçok farklı seçenek sunmaktadır. Ücretsiz sürümü de bulunmaktadır ve kişisel veya ticari amaçlarla ücretsiz olarak kullanılabilir. İkonları indirmek ve web sitenizde kullanmak için kredi belirmeniz gerekmektedir.
-
Font Awesome: Bu kütüphane, simgelerinizin stilini daha fazla kontrol etmenizi sağlar ve ücretsiz olarak kullanılabilir. Kütüphaneyi kullanmak için indirme veya CDN yöntemlerinden birini tercih edebilirsiniz.
Flat Icon Kullanımı
Örnek olarak, web sayfanıza sosyal medya simgeleri eklemek istediğinizi düşünelim. Flat Icon üzerinde arama çubuğunu kullanarak istediğiniz simgeyi bulabilirsiniz. İstenilen simgeye tıkladığınızda, farklı renk seçenekleriyle birlikte indirilebilir. İstediğiniz boyutta indirme seçeneği mevcuttur. İndirildikten sonra, web sayfanızda göstermek istediğiniz yere eklemeniz yeterlidir.
Pros:
- Birçok farklı seçenek sunar.
- Ücretsiz veya premium sürüm mevcuttur.
Cons:
- Ücretsiz sürümde simgelerin stilini tam olarak kontrol edemezsiniz.
Font Awesome Kullanımı
Font Awesome, simgelerinizin stilini daha fazla kontrol etmenizi sağlar. Kütüphaneyi kullanmak için öncelikle bir kit kodu almanız gerekmektedir. Kit kodu, size e-posta olarak gönderilecek özel bir CDN bağlantısıdır. Aldıktan sonra, HTML dosyanızın
bölümüne bu CDN linkini eklemeniz gerekmektedir. Linki ekledikten sonra, istediğiniz simgeleri HTML dosyanıza yapıştırarak kullanabilirsiniz.
Pros:
- Simgelerin stilini daha fazla kontrol edebilirsiniz.
- Ücretsiz sürüm mevcuttur.
Cons:
- Kit kodu almanız gerekmektedir.
- İkonlara stil vermek için CSS kullanmanız gerekmektedir.
Flat Icon Kullanımı
Flat Icon kütüphanesini kullanarak simgeleri web sayfanıza nasıl ekleyeceğinizi adım adım görelim.
Sosyal Medya İkonları Ekleme
Örnek olarak, web sayfanıza Instagram simgesi eklemek istediğinizi düşünelim. Flat Icon üzerinde arama çubuğunu kullanarak "instagram" simgesini arayın. İstediğiniz simgeye tıklayarak indirmek için farklı seçenekler arasından seçim yapabilirsiniz. İndirdikten sonra, simgeyi web sayfanızda göstermek istediğiniz yere eklemeniz yeterlidir.
Pros:
- Birçok farklı sosyal medya simgesi bulunmaktadır.
- Ücretsiz olarak kullanılabilir.
Cons:
- Ücretsiz sürümde stil seçenekleri sınırlıdır.
İkon Boyutunu Değiştirme
Simgenin boyutunu değiştirmek için
etiketinin "width" ve "height" özelliklerini kullanabilirsiniz. Örneğin, 32 piksel boyutunda bir simge kullanmak istediğinizi varsayalım. Bunun için
etiketine "width" ve "height" özelliklerini eklemeniz gerekmektedir.
Pros:
- İstediğiniz boyutta simge kullanabilirsiniz.
İkon Rengini Değiştirme
Ücretsiz sürümde simgelerin rengini değiştiremezsiniz. Ancak, premium sürümü kullanıyorsanız stil seçeneklerine sahip olabilirsiniz.
Pros:
- Premium sürümde simgelerin rengini değiştirebilirsiniz.
Cons:
- Ücretsiz sürümde simgelerin rengini değiştiremezsiniz.
İkonları Web Sayfasına Eklemek
İkonları web sayfanıza eklemek için
etiketini kullanabilirsiniz. Örneğin, "insta.png" adında bir simgeyi web sayfanıza eklemek istediğinizi varsayalım. Bunun için
etiketine "src" özelliğini ve simgenin dosya yolunu eklemeniz gerekmektedir. Ayrıca telif hakkı bilgisini de eklemeyi unutmayın.
Pros:
- Kolayca simgeleri web sayfanıza ekleyebilirsiniz.
Cons:
- Stil seçenekleri sınırlıdır.
Font Awesome Kullanımı
Font Awesome kütüphanesini kullanarak simgeleri web sayfanıza nasıl ekleyeceğinizi adım adım görelim.
İkon Yükleme ve Linkleme
Font Awesome simgelerini kullanmak için öncelikle kütüphaneyi indirmeniz veya CDN ile bağlantı yapmanız gerekmektedir. İndirilen kütüphane dosyasını proje klasörünüze sürükleyip bırakmanız yeterlidir.
Pros:
- Simgeleri hızlıca indirebilir ve kullanmaya başlayabilirsiniz.
İkonu Web Sayfasına Eklemek
Font Awesome simgelerini kullanmak için önce HTML dosyanızın
bölümünde CSS dosyalarını bağlamanız gerekmektedir. CSS dosyalarını bağladıktan sonra,
etiketi içerisinde simgeyi yapıştırarak kullanabilirsiniz.
Pros:
- Simgeleri kolayca web sayfanıza ekleyebilirsiniz.
Cons:
- İsteğe bağlı olarak stil değişiklikleri yapmanız gerekmektedir.
- Simgeleri stilize etmek için CSS kullanmanız gerekmektedir.
İkon Stillerini Değiştirme
Simgelerin stilini değiştirmek için CSS kullanmanız gerekmektedir. Örneğin, simgenin boyutunu, rengini ve hover efektlerini değiştirebilirsiniz.
Pros:
- Simgelerin stilini daha fazla kontrol edebilirsiniz.
Cons:
- Stil değişiklikleri için CSS kullanmanız gerekmektedir.
İkonlara Hover Efekti Ekleme
Simgelerinize hover efekti eklemek için CSS'de "hover" özelliğini kullanabilirsiniz. Örneğin, simgenin üzerine gelindiğinde imlecin şeklini değiştirebilir veya rengini değiştirebilirsiniz.
Pros:
- Simgelerinize etkileyici hover efektleri ekleyebilirsiniz.
Cons:
- Stil değişiklikleri için CSS kullanmanız gerekmektedir.
Sonuç
Bu video ile HTML sayfanıza nasıl simgeler ekleyeceğinizi ve ihtiyaç duyduğunuzda nasıl stil verebileceğinizi öğrenmiş oldunuz. Simge kütüphaneleri olan Flat Icon ve Font Awesome'un nasıl kullanıldığını ve farklarını gördük. Eğer daha fazla sorunuz varsa, lütfen yorum olarak belirtin. Eğer videoyu yararlı bulduysanız lütfen beğenmeyi unutmayın. İzlediğiniz için teşekkür ederiz!
Sık Sorulan Sorular (FAQ)
Q: Hangi simge kütüphanesini kullanmalıyım, Flat Icon mu yoksa Font Awesome mu?
A: Hangi simge kütüphanesini kullanacağınıza karar verirken ihtiyaçlarınızı ve tercihlerinizi göz önünde bulundurmanız önemlidir. Flat Icon daha geniş bir seçim sunarken, Font Awesome daha fazla stil kontrolü sağlar.
Q: Simgeleri nasıl boyutlandırabilirim?
A: Flat Icon'da
etiketinin "width" ve "height" özelliklerini kullanarak; Font Awesome'da ise CSS ile "font-size" özelliğini kullanarak simgelerin boyutunu değiştirebilirsiniz.
Q: Simgelerin rengini nasıl değiştirebilirim?
A: Flat Icon'da ücretsiz sürümde simgelerin rengini değiştirmek mümkün değildir. Font Awesome'da ise CSS ile "color" özelliğini kullanarak simgelerin rengini değiştirebilirsiniz.
Q: İkonlara hover efekti nasıl ekleyebilirim?
A: Font Awesome'da CSS ile "hover" özelliğini kullanarak simgelerinize hover efekti ekleyebilirsiniz.
Q: Simgeleri nereye eklemeliyim?
A: Simgeleri HTML dosyanızda kullanmak istediğiniz yere
veya etiketi içinde ekleyebilirsiniz.