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

Question

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

这是它的样子

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

这是按钮的实际样子...

我希望它只是一个图标。

这可能吗？

Answer 1

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

编辑。

刚刚查看了 fontawesone，图标是使用实际字体而不是背景图像创建的。因此，我会看看 Alejandro Rodríguez 的回答。

Answer 2

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

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

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