Replace <button> with Font Awesome icon - html

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>