html - 将图标图像添加到 html 元素的 css 类

Question

在 font awesome 和 bootstrap 的情况下，我需要像这样向 HTML 元素添加图标图像。

像这样

例如，我需要将图标图像与 css 类相关联。假设类名是 ico，如果我做这样的事情

 <a href="#" class="ico">Email Link</a>

然后它应该如上图所示。

我如何使用 CSS 完成这个对 UI 设计非常重要的功能？

Answer 1

您可以使用伪元素

.ico{
    width:100px;
    display:block;
    height:20px;
    background:black;
    color:white;
    text-decoration:none;
    padding-left:20px;
}
.ico:before{
    content: '';
    background:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSj3XfIpf-OOJRCcWz4iN2CU3qMKVVbj0p0bRvKNGVo1U9pk_8ZIlyR8pWreA');
    background-size:cover;
        position:absolute;
    width:20px;
    height:20px;
    margin-left:-20px;
}

 <a href="#" class="ico">Email Link</a>
 <a href="#" class="ico">Another Link</a>