添加圖標鏈接/按鈕

Question

我目前有一個鏈接，我用它作爲按鈕看起來，我想給它添加一個圖標。

例如：一個加號+圖標旁邊的一個單詞，會說增加用戶。這裏是我的鏈接：

<a class="glossyBtn" href='<%:Url.Action("Edit", "Case", new{caseId = Model}) %>'>Cancel</a> 

這是我的風格.glossyBtn：

.glossyBtn 
{ 
    display: inline-block; 
    background-color: #c1e2f4; 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc)); 
    background-image: -webkit-linear-gradient(top, #eeeeee, #b1daf1); 
    background-image: -moz-linear-gradient(top, #eeeeee, #b1daf1); 
    background-image: -ms-linear-gradient(top, #eeeeee, #b1daf1); 
    background-image: -o-linear-gradient(top, #eeeeee, #b1daf1); 
    background-image: linear-gradient(top, #eeeeee, #b1daf1); 
    border: 1px solid #3e95c8; 
    border-bottom: 1px solid #3e95c8 !Important; 
    border-radius: 3px; 
    color: #046fad !Important; 
    font: bold 12px Helvetica Neue, Helvetica, Arial, sans-serif; 
    padding: 5px 12px; 
    text-align: center; 
    text-shadow: 0 1px 0 #eee; 
    text-decoration: none; 
    cursor: pointer; 
    list-style: none; 
    float: left; 
    margin-top: 5px; 
    margin-right: 5px; 
} 

現場演示：Tinkerbin

Answer 1

我沒有測試過這一點，但以下應正確定位工作：

<a class="glossyBtn" href='<%:Url.Action("Edit", "Case", new{caseId = Model}) %>'><span><img src="plus.png" alt=""></span>Cancel</a> 

By在包含<img>的<span>前綴文字前，您可以確保圖像與右側的文字保持內嵌。

Answer 2

使用:after僞選擇：

.glossyBtn:after { 
    content: '+'; 
    padding-left: 5px; 
} 

現場演示：Tinkerbin

---

如果你想文本之前添加加字符，使用:before僞選擇：

.glossyBtn:before { 
    content: '+'; 
    padding-right: 5px; 
} 

現場演示：Tinkerbin

---

我添加填充左/右，使文本和加上人物之間的一些空間。