替換<button>為Font Awesome圖標</button>

Question

我想用CSS中的Font Awesome圖標替換按鈕，但是我無法隱藏按鈕的文本。

button {
    border: medium none;
    bottom: 0;
    font-size: 35px;
    left: auto;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 20px;
    top: 0;
    background-color: white;
    cursor: pointer;
}
button::before {
    color: rgba(0, 0, 0, 0.25);
    content:"";
    font-family: FontAwesome;
    position: absolute;
    right: 0;
}

http://jsfiddle.net/evhqz1rh/2/

我怎樣才能做到這一點？

Answer 1

如果確實只需要使用CSS來執行此操作（而不是僅從HTML中刪除“菜單”），則可以設置overflow: visible但將元素置於屏幕之外，然后調整:before偽類以將其內容移回到屏幕上。

#primary-navigation-menu-toggle {
    border: medium none;
    bottom: 0;
    font-size: 35px;
    left: auto;
    overflow: visible;   /* change to visible */
    padding: 0;
    position: absolute;
    right: 20px;
    top: 0;
    background-color: white;
    cursor: pointer;
    right: -500px;       /* position off the page */
}
#primary-navigation-menu-toggle::before {
    color: rgba(0, 0, 0, 0.25);
    content:"";
    font-family: FontAwesome;
    position: absolute;
    left: -470px;        /* position on the page */
}

在此jsFiddle上看到它。

Answer 2

您不必使用button元素來執行此操作。 一個簡單的span或div都可以，因為它們都支持onClick事件。

另一種選擇是簡單地從按鈕代碼中刪除“菜單”文本：

<button aria-expanded="false" id="primary-navigation-menu-toggle"></button>