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>

通过在文本前加上<span>包含<img>，可以确保图片与右侧文字保持一致。

Answer 2

使用:after伪选择器：

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

现场演示：Tinkerbin

如果要在文本之前添加加号，请使用:before伪选择器：

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

现场演示：Tinkerbin

我添加了左/右填充，以便在文本和加号之间留出一些空格。

将图标添加到链接/按钮

2 个答案: