html - Bootstrap css 字形

Question

你好，我是第一次尝试使用 bootstrap 字形图标，但它没有按我想要的方式工作。

我想要左右图标，所以我选择了 glyphicon-chevron-left 和 glyphicon-chevron-right。

这是我的 html :

<a class="left carousel-control" data-slide="prev" href="#home_carousel">
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>

这是CSS:

.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left {
  text-shadow: none;
  background: rgba(255, 255, 255, .3);
  padding: 10px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-animation: PrevBtn 1.5s infinite; /* Safari 4+ */
  -moz-animation:    PrevBtn 1.5s infinite; /* Fx 5+ */
  -o-animation:      PrevBtn 1.5s infinite; /* Opera 12+ */
  animation:         PrevBtn 1.5s infinite; /* IE 10+ */
}

现在是这样的:

这就是我想要的样子:

由于某些原因，padding 属性使左箭头超出了框。

有什么建议吗？

编辑:

其实span就是盒子，::before就是箭头

编辑 2:我应该以其他方式做到这一点吗？将字形图标放在框内？

Answer 1

如果您删除您拥有的填充规则，而是设置宽度、高度和行高，您将得到您想要的:

.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left {
  text-shadow: none;
  background: rgba(255, 255, 255, .3);
  line-height:48px;
  width:48px;
  height:48px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-animation: PrevBtn 1.5s infinite; /* Safari 4+ */
  -moz-animation:    PrevBtn 1.5s infinite; /* Fx 5+ */
  -o-animation:      PrevBtn 1.5s infinite; /* Opera 12+ */
  animation:         PrevBtn 1.5s infinite; /* IE 10+ */
}

bootply example