HTML / CSS position icon above text

Question

I currently have many buttons on my page:

<input type="button" id="Back" value="Back" onclick="back();" class="backButton">

I need to add an icon to it to look something like this:

• First, how to add an icon above the text and center it.
• And secondly, it is possible to do this using only CSS. (if not only with minor changes to the HTML)

thanks in advance.

Answer 1

I need to add an icon to it to look something like this:

First, how to add an icon above the text and center it.

button. ( ). background-image. CSS, , , , .

:

:

<button class="cancel">
    <i></i>
    <span>Cancel</span>
</button>

CSS

button.cancel i::after {
    content: '\00d7'; display: block;
    font-size: 26px; font-style: normal; font-weight: 600; color: red;
}

psuedo- after i ( span ), content, (), .

-, , CSS. ( HTML)

, . , . .

input as-is - , input background-image ( ). input , , . , , , Windows, . CSS.

:

:

<input type="button" value="Cancel" data-value="Cancel" />

CSS

input[type=button] {
    min-width: 72px; height: 64px; position: relative;
    display: inline-block; vertical-align: top; padding-top: 36px;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'), 
        linear-gradient(#f5f5f5, #dfdfdf);
    background-repeat: no-repeat, no-repeat;
    background-position: center 4px, center center;
    background-size: 24px, auto;
    border: 1px solid #aaa; border-radius: 3px;
}
input[type=button]:active {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'), 
        linear-gradient(#dfdfdf, #f5f5f5);
    background-repeat: no-repeat, no-repeat;
    background-position: center 4px, center center; 
    background-size: 24px, auto;
    outline: 0px;
}
input[type=button]:focus { outline: 0px; }

background-image, , background-image, (, Windows). padding-top :active . :focus , outline.

, button! button.

:

Fiddle: http://jsfiddle.net/abhitalks/yw7wmvwh/1/

button { 
    min-width: 72px; height: auto; 
    display: inline-block; vertical-align: top; 
}
button.ok i::after {
    content: '\2713'; display: block;
    font-size: 23px; font-style: normal; font-weight: 600; color: green;
}
button.cancel i::after {
    content: '\00d7'; display: block;
    font-size: 26px; font-style: normal; font-weight: 600; color: red;
}

input[type=button] {
    min-width: 72px; height: 64px; position: relative;
    display: inline-block; vertical-align: top; padding-top: 36px;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'), 
        linear-gradient(#f5f5f5, #dfdfdf);
    background-repeat: no-repeat, no-repeat;
    background-position: center 4px, center center;
    background-size: 24px, auto;
    border: 1px solid #aaa; border-radius: 3px;
}
input[type=button]:active {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'), 
        linear-gradient(#dfdfdf, #f5f5f5);
    background-repeat: no-repeat, no-repeat;
    background-position: center 4px, center center; 
    background-size: 24px, auto;
    outline: 0px;
}
input[type=button]:focus { outline: 0px; }

<button class="ok">
    <i></i>
    <span>Ok</span>
</button>
<button class="cancel">
    <i></i>
    <span>Cancel</span>
</button>
<hr/>
<input type="button" value="Cancel" data-value="Cancel" />

Hide result

Answer 2

css

.backButton{
  background: url(https://cdn3.iconfinder.com/data/icons/musthave/24/Delete.png) no-repeat;
  background-position:center top;
  height: 40px;
  width: auto;
  text-align: center;
  padding:24px 10px 10px 10px;
  border: 1px solid #555555;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

<input type="button" id="Back" value="Back" onclick="back();" class="backButton">

Hide result

Answer 3

,

HTML

button {
font-size: 20px;
    width: 100px;
    height: 100px;
    }

#rock {
  padding:10px;
    background: url(https://upload.wikimedia.org/wikipedia/commons/6/65/Crystal_button_cancel.svg) top center ;
    background-repeat: no-repeat;
    background-position: 50% 10%; 
}

<button id="rock" onClick="choose(1)">Cancle</button>

Hide result

Answer 4

HTML

<button id="btnCancel" onClick="choose(1)">Cancel</button>

CSS

button {
font-size: 20px;
    width: 100px;
    height: 100px;
    }

#btnCancel {
  padding:10px;
    background: url(https://upload.wikimedia.org/wikipedia/commons/d/da/Crystal_button_cancel.png) top center ;
    background-repeat: no-repeat;
    background-position: 50% 10%;
    border-radius : 20px;
}