how to use font flaction icon for img and asp:ImageButton

Question

i want use font awesome in my form.

my form content img and asp:imagebutton.

i want use font awesome in img tag but this not work.

my code is :

    <img id="imgsaleNew" title="Create" runat="server" class="flaticon-yield" onclick="imgsaleNew_OnClick();" />

<asp:ImageButton ID="imgsaleOpen" runat="server" CausesValidation="false" ToolTip="Open"                                            OnClick="imgsaleOpen_Click" class="flaticon-yield"/>

My Css Class Is:

@font-face {
    font-family: "Flaticon";
    src: url("Font/flaticon.eot");
    src: url("Font/flaticon.eot#iefix") format("embedded-opentype"),
    url("Font/flaticon.woff") format("woff"),
    url("Font/flaticon.ttf") format("truetype"),
    url("Font/flaticon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
    font-family: Flaticon;
    font-size: 63px;
    font-style: normal;
    color:#368ee0;
}.flaticon-yield:before {
    content: "\e000";
}

score 2 · Accepted Answer · edited May 23 '17 at 12:03

2

Demo ..

in your CSS

.flaticon-yield:before {
    content: "\e000";
}

it looks that you're using content:"\e000" which does not exist in FontAwesome ..

Try another content, and you can get that from this page

Also, Unfortunately, most browsers do not support using :after or :before on img tags.

Take a look at this page for more info

Hope this will help you ..

edited May 23 '17 at 12:03

Community

1
1

answered Aug 04 '14 at 11:06

MujtabaFR

5,956
6
40
66

thanks.but my code worked in a,i,div tag but not work for img and asp:imagebutton tag. do can use font icon for img and asp:imageButton tag? – HapyUser Aug 04 '14 at 11:36
in the demo. you can see that font works in `asp:ImageButton` but not `img` ... if you want an icon showing in place of the `img`, That's only possible if you use the parent element and hide the `img` inside of it. That's because img elements can't have **pseudo elements**, which is used to display the icons. You could wrap the img in a figure tag and apply the icon class to that – MujtabaFR Aug 04 '14 at 11:46
1

@HapyUser see this demo http://jsfiddle.net/23brK/4/ , is it what you're looking for ?? – MujtabaFR Aug 04 '14 at 11:57

how to use font flaction icon for img and asp:ImageButton

1 Answers1