Question

我正在关注此tutorial以创建带有Icon的CSS 3按钮。但是本教程图标高度的问题取决于font-size。如果我增加文本的字体大小，图标很合适，但如果我尝试减小字体大小，它就不适合。我使用的图像是40x30

a.button {
  background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
  background-image: -webkit-gradient(linear,left top,left bottom,
      color-stop(0, #ffffff),color-stop(1, #dbdbdb));
  filter: progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#ffffff', EndColorStr='#dbdbdb');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#ffffff', EndColorStr='#dbdbdb')";
  border: 1px solid #fff;
  -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  padding: 5px 5px;
  text-decoration: none;
  text-shadow: #fff 0 1px 0;
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  display: block;
  color: #597390;
  line-height: 38px;
  font-size: 15px;
  font-weight: bold;
}
a.button:hover {
  background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
  background-image: -webkit-gradient(linear,left top,left bottom,
      color-stop(0, #ffffff),color-stop(1, #eeeeee));
  filter: progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#ffffff', EndColorStr='#eeeeee');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#ffffff', EndColorStr='#eeeeee')";
  color: #000;
  display: block;
}
a.button:active {
  background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
  background-image: -webkit-gradient(linear,left top,left bottom,
      color-stop(0, #dbdbdb),color-stop(1, #ffffff));
  filter: progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#dbdbdb', EndColorStr='#ffffff');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#dbdbdb', EndColorStr='#ffffff')";
  text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
  margin-top: 1px;
}
a.button {
  border: 1px solid #979797;
}
a.button.icon {
  padding-left: 11px;

}

a.button.icon span{
  padding-left: 48px;
  display: block;
  background: url(../img/gmail2.png) no-repeat;
}

Answer 1

你的陈述有点模棱两可，缺乏一个问题，但我会采取刺。

在这种情况下，font-size将始终扮演一个小因素，因为它将决定图标的高度。在某些时候，您将需要了解有关按钮大小的一些细节，但它不必受字体影响。如果您设置按钮height，则img{ height:100%; }图像将缩放以适合该区域。

<div id="container">
    <h1><img src="http://placedog.com/50/50" alt="" />Button</h1>
</div>

结合

#container{
    border: 2px solid black;
    width: 200px;
    height: 20px;
}
#container img{
    height:100%;
}

应该让你接近你正在寻找的东西。我已经掀起了一个小jsfiddle来展示实现这一目标的一种方法。

Answer 2

如果您可以分享您的代码，将会很有帮助在您提供的链接的css3 buttons examples中，如果我减小字体大小并设置以下CSS样式，则可以正常工作。

span { display: block; }

span是将文本包装在按钮内的标记。

带有图标的CSS3按钮

2 个答案: