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但是将元素放在屏幕上，然后调整{{1} }伪类将其内容移回屏幕。

:before

在此jsFiddle上查看。

Answer 2

您不必使用button元素来执行此操作。一个简单的span或div会同时支持onClick事件。

另一种选择是简单地从按钮代码中删除“菜单”文本：

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

将<button>替换为Font Awesome图标

2 个答案: