How to align icon inserted with :before method? - html

Question

How can I vertically align icon inserted using :before method?
Here is what I have:
<div class="button submit">
<a class="submit check_car_search" href="#" >Some Text</a>
</div>
CSS:
.button a{
background: none;
background-color: #32BBE7;
text-indent:1px;
color:#FFF;
text-decoration: none;
display: table-cell;
vertical-align:middle;
text-align:center;
height: auto;
padding: 10px;
border-radius: 3px;
font-weight: 600;
font-size: 50px;
font-style: italic;
}
.button a:hover{
background-color: #2597F0;
}
.button a:before {
content:url(http://i.stack.imgur.com/tKsDb.png);
position: relative
}
JSFiddle: https://jsfiddle.net/1z83tc1o/
How Can I align vertically icon relative to the text?

Answer 1

You can use background and set is size (width, height), Then you can use vertical-align.
CSS
.button a:before {
position: relative;
display: inline-block;
width: 18px;
height: 16px;
vertical-align: middle;
content:"";
background: transparent url(http://i.stack.imgur.com/tKsDb.png) no-repeat center center;
margin-right: 20px; // Optional
}
DEMO HERE

Answer 2

You use background and absolute position the icon to perfectly vertical align in the middle.
.button a:before {
content: " ";
background-image: url(http://i.stack.imgur.com/tKsDb.png);
position: absolute;
width: 18px;
height: 16px;
top: 50%;
margin: -8px 0 0 -25px;
}
Here is the example : https://jsfiddle.net/1z83tc1o/3/