Ana Sayfa Microsoft .NETAsp.Net Asp.Net Button’u Font Awesome Icon’a Çevirmek

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

by Sinan BOZKUŞ
11.412 kez okundu

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.

[css].input-buttontotext { background:none; border:none; margin:0; padding:0; }[/css]

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

[html]<asp:Button ID="Button1" runat="server" CssClass="input-buttontotext fa" Text="&#xf062;" />[/html]

 

 

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/

Bunlara da bakmak isteyebilirsiniz

2 yorum

Levent Yıkılmaz 30 Ekim 2015 - 23:01

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

Yanıtla
Caner Eymen 02 Mart 2016 - 12:55

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

Yanıtla

Bir Yorum Bırakın