如何讓我的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; 
} 

也來看看像「normalize.css」或「reset.css」一些CSS庫，以消除任何CSS規則由您的瀏覽器定義。

Answer 2

使用CSS重新定位背景圖像並使按鈕寬度和高度更小。

編輯。

剛看過fontawesone，圖標是使用實際字體而不是背景圖片創建的。因此，我會看看亞歷杭德羅羅德里格斯的回答。