css - 调整 CSS 滑出面板示例

Question

我正在尝试改编来自 here 的出色滑出式面板示例.

改编代码是here

我喜欢用不同的图标来表示隐藏/展开状态(比如 > 隐藏时，< 展开时)。是否可以通过更改上面的代码。最终我可能会使用 Font-Awesome 中的图标

谢谢。

编辑:

为了清楚地了解原始版本的变化，我计划使用的代码不使用相同的标记。这是为了避免妨碍历史。请使用版本 http://codepen.io/jetpacmonkey/pen/ktIJz

<header class="main-header">
    <label for="main-nav-check" class="toggle-menu">
      ☰
    </label>

    <h1>cssPanelMenu</h1>
  </header>

Answer 1

您可以使用伪元素 (IE8+)。将图标替换为 span with class .icon 然后连接 :before 样式以根据复选框是否被选中来显示内容.

Demo

HTML

<label for="main-nav-check" class="toggle-menu">
  <span class="icon"></span>
</label>

CSS

#main-nav-check:checked ~ .page-wrap .icon:before {
  content:"<";
}

#main-nav-check ~ .page-wrap .icon:before {
  content:">";
}