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

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

  •  21-06-2023
  •  | 
  •  

Frage

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.

War es hilfreich?

Lösung

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>

Andere Tipps

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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top