Forma İkon Ekleme
Forma ikon eklemek, formanıza görsel ilgi ve çekicilik katmanın harika bir yoludur. İkonlar, kullanıcıların formunuzu daha kolay anlamalarına ve gezinmelerine yardımcı olabilir. Ayrıca, formunuzu daha profesyonel ve markalı görünmesini sağlayabilir.
Forma ikon eklemenin birkaç farklı yolu vardır. En yaygın yöntem, HTML ve CSS kullanmaktır. HTML, ikonun yerini belirlemek için kullanılırken, CSS, ikonun görünümünü belirlemek için kullanılır.
Forma ikon eklemek için HTML kullanmak için, öncelikle ikonun yerini belirlemek için bir <i> etiketi kullanmanız gerekir. <i> etiketi, ikonun yerleştirileceği yere yerleştirilir. Örneğin, aşağıdaki kod, formun başlığına bir kalem simgesi ekler:
“`html
Form Başlığı
“`
<i> etiketinin içinde, ikonun sınıfını belirtmeniz gerekir. Sınıf, ikonun görünümünü belirler. Örneğin, yukarıdaki örnekte, “fa fa-pencil” sınıfı kullanılmıştır. Bu sınıf, Font Awesome ikon setinden bir kalem simgesi ekler.
Forma ikon eklemek için CSS kullanmak için, öncelikle ikonun görünümünü belirlemek için bir stil kuralı oluşturmanız gerekir. Stil kuralı, ikonun sınıfına göre seçilir. Örneğin, aşağıdaki stil kuralı, “fa fa-pencil” sınıfına sahip ikonların rengini maviye ayarlar:
css
.fa.fa-pencil {
color: blue;
}
Forma ikon eklemenin bir diğer yolu da, bir ikon yazı tipi kullanmaktır. İkon yazı tipleri, ikonları yazı tipi olarak içeren özel yazı tipleridir. İkon yazı tipleri kullanmak için, öncelikle ikon yazı tipini web sitenize eklemeniz gerekir. Bunu, ikon yazı tipinin CSS dosyasını web sitenizin <head> bölümüne ekleyerek yapabilirsiniz. Örneğin, aşağıdaki kod, Font Awesome ikon yazı tipini web sitenize ekler:
html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
İkon yazı tipini web sitenize ekledikten sonra, forma ikon eklemek için HTML ve CSS kullanabilirsiniz. HTML kullanarak ikonun yerini belirlemek için bir <i> etiketi kullanmanız gerekir. <i> etiketi, ikonun yerleştirileceği yere yerleştirilir. Örneğin, aşağıdaki kod, formun başlığına bir kalem simgesi ekler:
“`html
Form Başlığı
“`
<i> etiketinin içinde, ikonun sınıfını belirtmeniz gerekir. Sınıf, ikonun görünümünü belirler. Örneğin, yukarıdaki örnekte, “fas fa-pencil” sınıfı kullanılmıştır. Bu sınıf, Font Awesome ikon setinden bir kalem simgesi ekler.
Forma ikon eklemek için CSS kullanmak için, öncelikle ikonun görünümünü belirlemek için bir stil kuralı oluşturmanız gerekir. Stil kuralı, ikonun sınıfına göre seçilir. Örneğin, aşağıdaki stil kuralı, “fas fa-pencil” sınıfına sahip ikonların rengini maviye ayarlar:
css
.fas.fa-pencil {
color: blue;
}
Forma ikon eklemek, formanıza görsel ilgi ve çekicilik katmanın harika bir yoludur. İkonlar, kullanıcıların formunuzu daha kolay anlamalarına ve gezinmelerine yardımcı olabilir. Ayrıca, formunuzu daha profesyonel ve markalı görünmesini sağlayabilir.
Faydalı Siteler ve Dosyalar
- Font Awesome – Ücretsiz ve açık kaynaklı bir ikon seti.
- Material Design Icons – Google tarafından tasarlanan bir ikon seti.
- Bootstrap Icons – Bootstrap çerçevesinde bulunan bir ikon seti.
- IcoMoon – Ücretsiz ve açık kaynaklı bir ikon yazı tipi oluşturma aracı.
- Fontello – Ücretsiz ve açık kaynaklı bir ikon yazı tipi oluşturma aracı.