HTML/CSS - Aggiunta di un'icona a un pulsante

Question

Realizzo alcuni pulsanti css e voglio aggiungere un'icona prima del testo, "Testo pulsante".

ma non so come devo fare questo ...

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

Si potrebbe aggiungere un arco prima che il collegamento con una specifica classe in questo modo:

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

E poi dargli un larghezza specifica e un'immagine di sfondo proprio come si sta facendo con il pulsante stesso.

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

Non sono un guru dei CSS, ma in cima alla mia testa penso che dovrebbe funzionare.

Answer 2

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


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

Answer 3

Ecco cosa puoi fare usando la libreria di 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.