替换<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>