एचटीएमएल/सीएसएस - एक बटन में एक आइकन जोड़ना

Question

मैं कुछ सीएसएस बटन बना रहा हूं और मैं टेक्स्ट, "बटन टेक्स्ट" से पहले एक आइकन जोड़ना चाहता हूं।

लेकिन मैं जानता हूँ कि मैं यह कैसे करना चाहिए न ...

एचटीएमएल <div class="btn btn_red"><a href="#">Crimson</a><span></span></div>

सीएसएस

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

तुम इतनी तरह एक विशिष्ट वर्ग के साथ लिंक से पहले अंतराल जोड़ सकते हैं:

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

और फिर उसे दें विशिष्ट चौड़ाई और पृष्ठभूमि छवि जैसे आप बटन के साथ ही कर रहे हैं।

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

मुझे कोई सीएसएस गुरु हूँ, लेकिन मेरे सिर के ऊपर से मुझे लगता है कि काम करना चाहिए।

Answer 2

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


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

Answer 3

यहाँ तुम क्या font-भयानक लाइब्रेरी का उपयोग कर सकते हैं।

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।