Replace <button> with Font Awesome icon

Question

I want to replace a button with a Font Awesome icon in css, but I can't hide the text of the button.

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/

How can I do this?

Answer 1

If you really must do this with CSS only (as opposed to just removing "menu" from your HTML), you can set the overflow: visible but position the element off the screen, then adjust the :before pseudo class to move its contents back onto the screen.

#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 */
}

See it on this jsFiddle .

Answer 2

You don't have to use a button element to do this. A simple span or div would do as both support the onClick event.

Another option is to simply remove the "Menu" text from your button code:

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