添加图标链接/按钮

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

---

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