Forma Kodla Icon Ekleme

Forma Kodla İcon Ekleme

Forma kodla icon ekleme, web sayfalarında formların daha çekici ve kullanıcı dostu görünmesini sağlamak için kullanılan bir tekniktir. İconlar, formlardaki alanların açıklamasını yapmak, kullanıcıların dikkatini çekmek ve formların daha kolay doldurulmasını sağlamak için kullanılır.

Forma kodla icon eklemek için iki farklı yöntem kullanılabilir:

  • HTML koduyla icon ekleme: Bu yöntem, HTML koduna doğrudan icon ekleme kodunu ekleyerek yapılır.
  • CSS koduyla icon ekleme: Bu yöntem, CSS koduna icon ekleme kurallarını ekleyerek yapılır.

HTML Koduyla İcon Ekleme

HTML koduyla icon eklemek için aşağıdaki adımları izleyebilirsiniz:

  1. İcon’un bulunduğu URL’yi bulun.
  2. HTML koduna <img> etiketini ekleyin.
  3. <img> etiketinin src özniteliğine icon’un URL’sini ekleyin.
  4. <img> etiketinin alt özniteliğine icon’un açıklamasını ekleyin.

Örneğin, aşağıdaki HTML kodu, bir form alanının yanına bir soru işareti icon’u ekler:

html
<label for="name">Adınız:</label>
<input type="text" id="name">
<img src="question-mark.png" alt="Bu alanın açıklaması">

CSS Koduyla İcon Ekleme

CSS koduyla icon eklemek için aşağıdaki adımları izleyebilirsiniz:

  1. İcon’un bulunduğu URL’yi bulun.
  2. CSS koduna @font-face kuralını ekleyin.
  3. @font-face kuralının font-family özniteliğine icon’un adını ekleyin.
  4. @font-face kuralının src özniteliğine icon’un URL’sini ekleyin.
  5. CSS koduna icon’u kullanmak istediğiniz öğenin stilini tanımlayan bir kural ekleyin.
  6. Öğenin stilini tanımlayan kuralın font-family özniteliğine icon’un adını ekleyin.

Örneğin, aşağıdaki CSS kodu, bir form alanının yanına bir soru işareti icon’u ekler:

“`css
@font-face {
font-family: “question-mark”;
src: url(“question-mark.woff”);
}

.icon {
font-family: “question-mark”;
font-size: 16px;
color: #000;
}
“`

Faydalı Siteler ve Dosyalar

  • Font Awesome: Font Awesome, web sayfalarında kullanabileceğiniz ücretsiz bir icon setidir.
  • Material Design Icons: Material Design Icons, Google tarafından geliştirilen ücretsiz bir icon setidir.
  • Bootstrap Icons: Bootstrap Icons, Bootstrap framework’ü ile birlikte kullanabileceğiniz ücretsiz bir icon setidir.
  • Iconify: Iconify, web sayfalarında kullanabileceğiniz ücretli ve ücretsiz icon’ları içeren bir platformdur.
  • Icon Fonts: Icon Fonts, web sayfalarında kullanabileceğiniz ücretsiz bir icon setidir.

Yayımlandı

kategorisi