How To Apply A Font-Face Icon Into A Submit Button

StackOverflow https://stackoverflow.com/questions/22652426

  •  21-06-2023
  •  | 
  •  

题

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.

有帮助吗？

解决方案

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>

其他提示

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>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top