CODEWITHSUNDEEP
asp.netfont-awesome
Massey
Massey

Reputation: 1125

How to use FontAwesome icons in asp.net webform ImageButton controls

I am planning to use FontAwesome icons in my asp.net webforms websites. The problem is that in many cases, the images are set dynamically from the code behind using asp:ImageButton using the ImageUrl property. Since FontAwesome uses either <I> or <Span> tags to display icons, I am wondering how to use it in asp:ImageButton . I am new to FontAwesome icons, so my apologies for this simple question

Upvotes: 0

Views: 10112

Answers (2)

Goran Mottram
Goran Mottram

Reputation: 6304

As FontAwesome is a font that requires HTML elements to display, neither <asp:ImageButton /> (only allows images) nor <asp:Button /> (only allows plain text) are suitable. You are better off using a HtmlButton.

HtmlButton Remarks: The HTML 4.0 <button> element enables you to create buttons composed of embedded HTML elements (and even other Web Forms controls).

<button id="btnSearch" runat="server"><i class="fa fa-search"></i> Search</button>

Read more: HtmlButton Control

Upvotes: 0

Bardo
Bardo

Reputation: 2523

FontAwesome is not a set of icons. It's a font type.

Since CSS has allowed browsers to download font types on the run, there is a quite usual approach to use font types for vectorial icon imaging.

This is quite useful and has several advantages (as some disadvantages), but the discussion of the technology is outside of the question scope.

What do you need to use FontAwesome in your project and how does it work:

You need to download the CSS files for FontAwesome project and include them into your project, at least linking it into the pages that are going to use FontAwesome icons.

You also need to download the font types available in the project, and made them availables at your webserver, so browsers can download them.

Finally, FontAwesome works adding icons to HTML containers, so you only need to add to any HTML container element two classes: fa and the class referencing the icon you have to include into the container:

<div><span class="fa fa-plus"></span> Whatever</div>

Upvotes: 1

Related Questions