HTML/CSS - Agregar un ícono a un botón

Question

Estoy haciendo algunos botones css y quiero agregar un icono antes del texto, "Texto del botón".

pero no sé cómo debo hacer esto ...

HTML <div class="btn btn_red"><a href="#">Crimson</a><span></span></div>

CSS

body { 
    margin: 0; 
    padding: 10px; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 14px; 
} 
/* Glassy Buttons */ 
.btn { 
    float: left; 
    clear: both; 
    background: url(imgs/button_left.png) no-repeat; 
    padding: 0 0 0 10px; 
    margin: 5px 0; 
} 
.btn a{ 
    float: left; 
    height: 40px; 
    background: url(imgs/button_middle.png) repeat-x left top; 
    line-height: 40px; 
    padding: 0 10px; 
    color: #fff; 
    font-size: 1em; 
    text-decoration: none; 
} 
.btn span { 
    background: url(imgs/button_right.png) no-repeat; 
    float: left; 
    width: 10px; 
    height: 40px; 
} 
.btn_gray {background-color: #808080;} 
.btn_green { background-color: #ADFF2F;} 
.btn_blue {background-color: #0000CD;} 
.btn_red {background-color: #DC143C;} 

Answer 1

Se podría añadir un lapso antes del enlace con una clase específica de este modo:

<div class="btn btn_red"><span class="icon"></span><a href="#">Crimson</a><span></span></div> 

Y luego dale un ancho específico y una imagen de fondo como lo hace con el botón.

.btn span.icon { 
    background: url(imgs/icon.png) no-repeat; 
    float: left; 
    width: 10px; 
    height: 40px; 
} 

No soy un gurú de CSS pero creo que debería funcionar.

Answer 2

<a href="#" class="btnTest">Test</a> 


.btnTest{ 
    background:url('images/icon.png') no-repeat left center; 
    padding-left:20px; 
}  

Answer 3

Esto es lo que puede hacer usando la biblioteca font-awesome.

button.btn.add::before { 
 
    font-family: fontAwesome; 
 
    content: "\f067\00a0"; 
 
} 
 

 
button.btn.edit::before { 
 
    font-family: fontAwesome; 
 
    content: "\f044\00a0"; 
 
} 
 

 
button.btn.save::before { 
 
    font-family: fontAwesome; 
 
    content: "\f00c\00a0"; 
 
} 
 

 
button.btn.cancel::before { 
 
    font-family: fontAwesome; 
 
    content: "\f00d\00a0"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<!--FA unicodes here: http://astronautweb.co/snippet/font-awesome/--> 
 
<h4>Buttons with text</h4> 
 
<button class="btn cancel btn-default">Close</button> 
 
<button class="btn add btn-primary">Add</button> 
 
<button class="btn add btn-success">Insert</button> 
 
<button class="btn save btn-primary">Save</button> 
 
<button class="btn save btn-warning">Submit Changes</button> 
 
<button class="btn cancel btn-link">Delete</button> 
 
<button class="btn edit btn-info">Edit</button> 
 
<button class="btn edit btn-danger">Modify</button> 
 

 
<br/> 
 
<br/> 
 
<h4>Buttons without text</h4> 
 
<button class="btn edit btn-primary" /> 
 
<button class="btn cancel btn-danger" /> 
 
<button class="btn add btn-info" /> 
 
<button class="btn save btn-success" /> 
 
<button class="btn edit btn-link"/> 
 
<button class="btn cancel btn-link"/>

Fiddle here.