Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir konuşmacının sunduğu web sayfalarında ikon kullanımı ve SVG teknolojisi hakkında kapsamlı bir eğitim içeriğidir.
- Video, SVG'nin ne olduğunu ve web sayfalarında neden kullanılabileceğini açıklayarak başlıyor, ardından İcomoon platformu üzerinden ikonların nasıl kullanılacağını gösteriyor. Daha sonra Illustrator programı kullanılarak kendi SVG ikonlarının nasıl oluşturulacağı adım adım anlatılıyor ve son olarak seçilen ikonların bir set halinde nasıl oluşturulup web sitesine nasıl dahil edileceği gösteriliyor.
- Eğitim içeriğinde ayrıca font ve stil dosyalarının nasıl kopyalanacağı, ikonların boyutlandırılması ve renklendirilmesi gibi temel özellikler de detaylı olarak açıklanmaktadır. Video, web sayfalarında ikon kullanımını öğrenmek isteyenler için kapsamlı bir kaynak niteliğindedir.
- 00:07Web Sayfalarında İkon Kullanımı ve SVG Nedir?
- Web sayfalarında ikonların nasıl kullanılacağı, SVG (Scaleble Vektör Graphics) ne olduğu ve SVG'yi nasıl oluşturabileceğimiz konuları ele alacağız.
- SVG, ölçeklendirilebilir vektör grafikleri anlamına gelir ve matematiksel komutlarla oluşturulduğu için çözünürlük sorunu yaşamaz.
- Normal JPEG ve PNG resimlerinden farklı olarak, SVG'ler matematiksel olarak oluşturulduğu için herhangi bir çözünürlük sorunu yaşanmaz.
- 01:11İkon Kullanımında Geçmiş ve Günümüz Yöntemleri
- Eskiden font-based ikonlar kullanılırdı, bu yöntem kullanımı kolaydı ancak tüm ikon paketini kullanmak zorunda kalınması bir dezavantajdı.
- İcomoon ve Fontello gibi siteler, istenilen ikonları seçip SVG olarak indirerek kullanma imkanı sunuyor.
- İcomoon, çeşitli ikon kütüphanelerini sunan ve ücretsiz olarak kullanılabilen bir platformdur.
- 02:41İcomoon Kullanımı
- İcomoon'da ücretsiz kayıt yapılarak sıklıkla kullanılan ikon paketleri saklanabilir.
- İcomoon'un ücretsiz olarak sunduğu ikon paketlerinde rengi, biçimini ve boyutunu değiştirebileceğiniz ikonlar bulunmaktadır.
- Kütüphaneden ikonları ekleme seçeneği ile çeşitli ücretsiz kütüphanelerden ikon seçebilirsiniz.
- 05:18Özel İkon Oluşturma
- İcomoon'da kendi SVG ikonlarınızı oluşturabilir ve import edebilirsiniz.
- Illustrator gibi vektör tabanlı programlarla istediğiniz vektörü çizip SVG çıktısı alabilirsiniz.
- Illustrator'da oluşturulan SVG ikonları İcomoon'a import edilebilir ve kendi ikon setinizi oluşturabilirsiniz.
- 08:46İkonları Sitenize Dahil Etme
- İcomoon'da seçtiğiniz ikonlarla birlikte "Generate Font" seçeneği ile özel bir font oluşturabilirsiniz.
- Oluşturulan fontu indirip, sitenizde kullanmak için gerekli dosyaları klasöre çıkartabilirsiniz.
- İcomoon'da "Get Code" seçeneği ile ikonları nasıl kullanacağınızla ilgili ipuçları alınabilir.
- 10:49İcon Font'ları Web Sitesine Ekleme
- İcon font'ları web sitesine eklemek için önce font dosyasını ana dizine atmak gerekir.
- İcomoon'dan indirilen font'un içindeki style.css dosyası da kopyalanıp siteye dahil edilmelidir.
- Style.css dosyası siteye dahil edildikten sonra, icon.css olarak isimlendirilebilir ve link etiketi ile siteye eklenir.
- 12:28İconların Kullanımı
- İconları kullanmak için HTML'de span etiketi içinde class özelliği kullanılır.
- İcomoon'da get code kısmından kopyalanmış span kodu, siteye yapıştırılarak ikonlar eklenebilir.
- İkonların büyüklüğü CSS ile font-size özelliği ile kolayca değiştirilebilir ve SVG formatı sayesinde bozulmaz.
- 14:24İconların Düzenlenmesi
- İconların rengi CSS ile değiştirilebilir, ancak bazı ikonlar kendi font ailesindeki ayarlamalar nedeniyle rengi değiştirilemez.
- İcon.css dosyasında yapılan değişiklikler, ikonların görünümünü etkileyebilir.
- İcomoon'da hesap oluşturularak eklenen ikonlar ve font aileleri otomatik olarak kaydedilir ve tekrar kullanılabilir.