HTML Websites için İkon Nasıl Eklenir?

İçindekiler 📚

1. Giriş
2. İkon Ekleme
   • İkon Kütüphaneleri
   • Flat Icon Kullanımı
   • Font Awesome Kullanımı
3. Flat Icon Kullanımı
   • Sosyal Medya İkonları Ekleme
   • İkon Boyutunu Değiştirme
   • İkon Rengini Değiştirme
   • İkonları Web Sayfasına Eklemek
4. Font Awesome Kullanımı
   • İkon Yükleme ve Linkleme
   • İkonu Web Sayfasına Eklemek
   • İkon Stillerini Değiştirme
   • İkonlara Hover Efekti Ekleme
5. Sonuç
6. 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:

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

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