HTML/CSS - 向按钮添加图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3490216/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS - Adding an Icon to a button
提问by user377419
I making some css buttons and I want to add an icon before the text, "Button Text".
我制作了一些 css 按钮，我想在文本“按钮文本”之前添加一个图标。
But I dont know how I should do this...
但我不知道我该怎么做...
HTML
<div class="btn btn_red"><a href="#">Crimson</a><span></span></div>
HTML
<div class="btn btn_red"><a href="#">Crimson</a><span></span></div>
CSS
CSS
body {
margin: 0;
padding: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
/* Glassy Buttons */
.btn {
float: left;
clear: both;
background: url(imgs/button_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(imgs/button_middle.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(imgs/button_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_gray {background-color: #808080;}
.btn_green { background-color: #ADFF2F;}
.btn_blue {background-color: #0000CD;}
.btn_red {background-color: #DC143C;}
回答by Jeff Treuting
You could add a span before the link with a specific class like so:
您可以在具有特定类的链接之前添加一个跨度，如下所示：
<div class="btn btn_red"><span class="icon"></span><a href="#">Crimson</a><span></span></div>
And then give that a specific width and a background image just like you are doing with the button itself.
然后给它一个特定的宽度和一个背景图像，就像你对按钮本身所做的那样。
.btn span.icon {
background: url(imgs/icon.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
I am no CSS guru but off the top of my head I think that should work.
我不是 CSS 大师，但我认为这应该可行。
回答by vohrahul
Here's what you can do using font-awesome library.
这是您可以使用 font-awesome 库执行的操作。
button.btn.add::before {
font-family: fontAwesome;
content: "\f067<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!--FA unicodes here: http://astronautweb.co/snippet/font-awesome/-->
<h4>Buttons with text</h4>
<button class="btn cancel btn-default">Close</button>
<button class="btn add btn-primary">Add</button>
<button class="btn add btn-success">Insert</button>
<button class="btn save btn-primary">Save</button>
<button class="btn save btn-warning">Submit Changes</button>
<button class="btn cancel btn-link">Delete</button>
<button class="btn edit btn-info">Edit</button>
<button class="btn edit btn-danger">Modify</button>
<br/>
<br/>
<h4>Buttons without text</h4>
<button class="btn edit btn-primary" />
<button class="btn cancel btn-danger" />
<button class="btn add btn-info" />
<button class="btn save btn-success" />
<button class="btn edit btn-link"/>
<button class="btn cancel btn-link"/>
a0";
}
button.btn.edit::before {
font-family: fontAwesome;
content: "\f044<a href="#" class="btnTest">Test</a>
.btnTest{
background:url('images/icon.png') no-repeat left center;
padding-left:20px;
}
a0";
}
button.btn.save::before {
font-family: fontAwesome;
content: "\f00c##代码##a0";
}
button.btn.cancel::before {
font-family: fontAwesome;
content: "\f00d##代码##a0";
}