HTML/CSS - Ajout d'une icône à un bouton

Question

Je crée des boutons CSS et je veux ajouter une icône avant le texte, "Texte du bouton".

Mais je ne sais pas comment je devrais le faire ...

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

Vous pouvez ajouter une durée avant que le lien avec une classe spécifique comme ceci:

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

Et puis en donner un largeur spécifique et une image de fond, tout comme vous le faites avec le bouton lui-même. Je ne suis pas un gourou CSS, mais je pense que cela devrait fonctionner.

Answer 2

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


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

Answer 3

Voici ce que vous pouvez faire en utilisant font-awesome library.

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.