HTML/CSS Position icon above text

Question

Currently i have a lot of back buttons on my page:

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

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

• First how do I add icon above text and aligne them centrally.
• And second is it possible to do it using only CSS. ( if not with only a minor modifications to HTML )

Thx in advance.

Answer 1

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

First how do I add icon above text and align them centrally.

You should use button element for that. It exists for this very purpose (custom styling and markup). However, you need not to use a background-image for that. To be able to control everything via CSS, just make sure you have same markup for all the buttons you have and then control using classes.

For example:

Markup:

<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;
}

Use the after psuedo-element on i (or span whatever) and depending on the class use the content property to insert your icon as text (glyph) which you can style as you want.

And second is it possible to do it using only CSS. ( if not with only a minor modifications to HTML )

This is very much possible, but cumbersome. I would not recommend this method, it is not worth the effort. You have been warned.

To use the existing input as-is without any change in the markup, you need to style the input itself and will have to use a background-image (in fact two background images). The input styling has a problem, that it loses its platform style as soon as you tinker with its style. So, you will lose the button like behaviour and Windows like button gradient and effects. You will have to replicate all that functionality via CSS.

For example:

Markup:

<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; }

The above code uses first background-image to show the icon, and second background-image to show the gradient (like Windows platform style). It uses padding-top to push the text down and :active state to set the behaviour of inverting the gradient when clicked. :focus state to remove the outline.

All this to mimic the behaviour of a button! It is much better to use button itself.

Here is a combined demo of both the techniques:

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

Snippet:

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" />

Answer 2

just add your class to css file

.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">