HTML/CSS-向按钮添加图标

我制作了一些css按钮，我想在文本“按钮文本”之前添加一个图标

但是我不知道我该怎么做

HTML

CSS

---

您可以在链接之前添加一个span，并使用特定类，如下所示：

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

我不是CSS大师，但在我的头脑中，我认为这应该行得通。

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


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

B.测试{
背景：url（'images/icon.png'）不重复左中心；
左侧填充：20px；
}    

以下是使用字体库可以做的事情

button.btn.add:：before{
字体系列：Fontsome；
内容：“\f067\00a0”；
}
button.btn.edit:：before{
字体系列：Fontsome；
内容：“\f044\00a0”；
}
button.btn.save:：before{
字体系列：Fontsome；
内容：“\f00c\00a0”；
}
button.btn.cancel:：before{
字体系列：Fontsome；
内容：“\f00d\00a0”；
}

带文本的按钮
接近
添加
插入
拯救
提交更改
删除
编辑
修改




没有文本的按钮

带有表情符号图标的最简单按钮

按钮{
线高：25px；
}
按钮：：之前{
内容：“也许你想尝试一种更新/更干净的方法，使用令人敬畏的字体。检查我下面的答案。
.btn span.icon {
    background: url(imgs/icon.png) no-repeat;
    float: left;
    width: 10px;
    height: 40px;
}

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


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