If you implement font icon it is not possible with input tag. Instead, use this for submit button:
<button class='button' type='submit'><span class="glyph-icon flaticon-delete13"></span>Submit</button>
Pergunta
i have the code for inputting font-face icons and it is working very properly but only into , ,
or tags. when i try to use font-faces icons into form buttons (eg. image buttons, submit buttons, reset buttons...) it doesn't show.
hege goes the css code:
@font-face {
font-family: "Flaticon";
src: url("flaticon.eot");
src: url("flaticon.eot#iefix") format("embedded-opentype"),
url("flaticon.woff") format("woff"),
url("flaticon.ttf") format("truetype"),
url("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: 20px;
font-style: normal;
margin-left: 20px;
}.flaticon-delete13:before {
content: "\e000";
}
and here goes the html snippet code that works fine:
<body>
<div class="glyph-icon flaticon-delete13"></div>
</body>
this is the link that goes into the header:
<link rel="stylesheet" type="text/css" href="flaticon.css">
i want to put this font-face icon into a form button (eg. submit button) along with a text. for instance: an icon "cross" along with the text "Add".
thanks in advance.
Solução
If you implement font icon it is not possible with input tag. Instead, use this for submit button:
<button class='button' type='submit'><span class="glyph-icon flaticon-delete13"></span>Submit</button>
Outras dicas
I would recommend using Font Awesome to achieve this result.
Check out my jsfiddle: http://jsfiddle.net/irkanu/7VytQ/
I also used Bootstrap to achieve the minimal styling to the form.
The code for the button would be:
<button type="submit" class="btn btn-default"><i class="fa fa-plus"></i> Add</button>
Is this what you looking for. You can use icomoon to create your own icons http://jsfiddle.net/SKMN9/
<button type="submit" class="buttons add">Add New Page</button>