Asp.Net Button’u Font Awesome Icon’a Çevirmek

fontawesome-aspnet

Msdn forumları, Stack overflow vb. baya araştırmam sonucu yazılan mesajlardan yapılamayacağını öğrendim. Ama yaptım, evet başardım :)

FontAwesome’ı neden button olarak kullanmam gerektiğini merak edenler için; repeater içerisinde ikon olarak kullanıp, tıklandığında itemcommand’ı tetiklemem gerekiyordu. Bunun için bir asp button’una ihtiyacım vardı.

Anlatacaklarım Asp.net WEBFORMS içindir, Asp.net MVC yapısı gereği zaten çok basit bir şekilde kullanılabilmektedir.

Öncelikle button’umuzu button görünümünden kurtarıp metin haline getirmek için aşağıdaki gibi bir css class’ı yazıyoruz.

.input-buttontotext { background:none; border:none; margin:0; padding:0; }

Şimdi button’umuzu oluşturuyoruz, oluştururken hem yukarıdaki oluşturduğumuz css classını hemde fontawesome’ın kendinden gelen “fa” classını ekliyoruz.

<asp:Button ID="Button1" runat="server" CssClass="input-buttontotext fa" Text="" />

 

 

Dikkat ettiyseniz Text alanında acayip bir şeyler yazıyor :) Bunlar Unicode karakterler. İşte bu karakterler ile istediğimiz ikonları ekleyebiliyoruz.

FontAwesome’ın ikonlarının unicodelarına linkten ulaşabilirsiniz.

https://fortawesome.github.io/Font-Awesome/cheatsheet/

  2Yorumlar

  1. Levent Yıkılmaz   •  

    Yararlı bir konu hocam, değerli paylaşımınız için teşekkür ederim.

  2. Caner Eymen   •  

    Değerli bir paylaşım. Emeğinize sağlık.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir