如何让HTML按钮周围的灰色区域消失？

Question

我在HTML中使用字体真棒图标。

看起来像什么

  <button type="button" ng-click="authenticate('facebook')"><i class="fa fa-facebook-official fa-5x"></i></button>

这里的按钮实际上是什么样的......

我希望它只是图标。

这可能吗？

Answer 1

这是因为每个浏览器都添加了自己的CSS规则。您可以通过从按钮元素中删除边框，背景和填充来解决它：

button {
    border: none;
    background: none;
    padding: 0px;
}

另请查看一些css库，例如“normalize.css”或“reset.css”，以删除浏览器定义的所有CSS规则。

Answer 2

使用CSS重新定位背景图像，并使按钮的宽度和高度更小。

修改

刚看了一下fontawesone，图标是使用实际字体而不是背景图片创建的。因此，我会看看亚历杭德罗·罗德里格斯的答案。