HTML/CSS - 在按鈕上添加一個圖標

我製作了一些css按鈕，並且希望在文本「Button Text」之前添加一個圖標。HTML/CSS - 在按鈕上添加一個圖標

但我不知道我應該怎麼做這個...

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;}

來源

2010-08-16 user377419

你可以用像這樣一類特殊的鏈接前添加一個跨度：

<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; 
}

我不是CSS的大師，但關閉我的頭頂我認爲這應該工作。

來源

2010-08-16 02:26:33

傑夫T是正確的。 – jessegavin 2010-08-16 02:28:16

非常感謝你！ – user377419 2010-08-16 15:34:28

也許你想嘗試使用font-awesome的更新/更清晰的方法。在下面檢查我的答案。 – vohrahul 2017-02-03 13:14:41

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


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

來源

2010-08-16 07:40:17 VMT

下面是使用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。

來源

2017-02-03 13:12:11 vohrahul

HTML/CSS - 在按鈕上添加一個圖標

回答

相關問題