CSS 如何将图像背景添加到 btn-default twitter-bootstrap 按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31281792/
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
How to add image background to btn-default twitter-bootstrap button?
提问by Nere
I try to design a bootstrap v3.3.5 button by using the existing class btn-default, below are the sample of codes of what I had done.
我尝试使用现有的类btn-default设计一个 bootstrap v3.3.5 按钮，下面是我所做的代码示例。
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.sign-in-facebook
{
background-image: url('http://i.stack.imgur.com/e2S63.png');
background-position: -9px -7px;
background-repeat: no-repeat;
background-size: 39px 43px;
padding-left: 41px;
color: #000;
}
.sign-in-facebook:hover
{
background-image: url('http://i.stack.imgur.com/e2S63.png');
background-position: -9px -7px;
background-repeat: no-repeat;
background-size: 39px 43px;
padding-left: 41px;
color: #000;
}
</style>
<p>My current button got white background<br/>
<input type="button" value="Sign In with Facebook" class="btn btn-default sign-in-facebook" style="margin-top:2px; margin-bottom:2px;" >
</p>
<p>I need the current btn-default style like below<br/>
<input type="button" class="btn btn-default" value="Sign In with Facebook" />
</p>
<strong>NOTE:</strong> facebook icon at left side of the button.Sample facebook icon:
示例 Facebook 图标：
How I can modify the class of .sign-in-facebookto create my own style button ?
我如何修改类.sign-in-facebook来创建我自己的样式按钮？
回答by aleksandar
Instead of using input type buttonyou can use buttonand insert the image inside the button content.
input type button您可以button在按钮内容中使用和插入图像，而不是使用。
<button class="btn btn-default">
<img src="http://i.stack.imgur.com/e2S63.png" width="20" /> Sign In with Facebook
</button>
The problem with doing this only with CSS is that you cannot set linear-gradientto the background you must use solid color.
仅使用 CSS 执行此操作的问题在于您无法设置linear-gradient为必须使用纯色的背景。
.sign-in-facebook {
background: url('http://i.stack.imgur.com/e2S63.png') #f2f2f2;
background-position: -9px -7px;
background-repeat: no-repeat;
background-size: 39px 43px;
padding-left: 41px;
color: #000;
}
.sign-in-facebook:hover {
background: url('http://i.stack.imgur.com/e2S63.png') #e0e0e0;
background-position: -9px -7px;
background-repeat: no-repeat;
background-size: 39px 43px;
padding-left: 41px;
color: #000;
}
body {
padding: 30px;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.sign-in-facebook {
background: url('http://i.stack.imgur.com/e2S63.png') #f2f2f2;
background-position: -9px -7px;
background-repeat: no-repeat;
background-size: 39px 43px;
padding-left: 41px;
color: #000;
}
.sign-in-facebook:hover {
background: url('http://i.stack.imgur.com/e2S63.png') #e0e0e0;
background-position: -9px -7px;
background-repeat: no-repeat;
background-size: 39px 43px;
padding-left: 41px;
color: #000;
}
</style>
<h4>Only with CSS</h4>
<input type="button" value="Sign In with Facebook" class="btn btn-default sign-in-facebook" style="margin-top:2px; margin-bottom:2px;">
<h4>Only with HTML</h4>
<button class="btn btn-default">
<img src="http://i.stack.imgur.com/e2S63.png" width="20" /> Sign In with Facebook
</button>回答by Craig Stroman
Have you tried using a icon font like http://fortawesome.github.io/Font-Awesome/
您是否尝试过使用像http://fortawesome.github.io/Font-Awesome/这样的图标字体
Bootstrap comes with their own library, but it doesn't have as many icons as Font Awesome.
Bootstrap 带有自己的库，但它没有 Font Awesome 那么多的图标。
回答by dubem uzuegbu
This works with font awesome:
这适用于字体真棒：
<button class="btn btn-outline-success">
<i class="fa fa-print" aria-hidden="true"></i>
Print
</button>
回答by Ankur Kumar Agarwal
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.sign-in-facebook
{
background-image: url('http://i.stack.imgur.com/e2S63.png');
background-position: -9px -7px;
background-repeat: no-repeat;
background-size: 39px 43px;
padding-left: 41px;
color: #000;
}
.sign-in-facebook:hover
{
background-image: url('http://i.stack.imgur.com/e2S63.png');
background-position: -9px -7px;
background-repeat: no-repeat;
background-size: 39px 43px;
padding-left: 41px;
color: #000;
}
</style>
<p>My current button got white background<br/>
<input type="button" value="Sign In with Facebook" class="sign-in-facebook btn btn-secondary" style="margin-top:2px; margin-bottom:2px;" >
</p>
<p>I need the current btn-default style like below<br/>
<input type="button" class="btn btn-default" value="Sign In with Facebook" />
</p>
<strong>NOTE:</strong> facebook icon at left side of the button.