css - 适配 CSS 滑出面板示例

Question

我正在尝试从这里改编一个出色的滑出式面板示例。

改编代码在这里

我喜欢为隐藏/展开状态设置不同的图标（例如隐藏时的 >，展开时的 <）。是否可以通过更改上面的代码。最终我可能会使用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>

score 1 · Accepted Answer

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

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:">";
}

score 0 · Accepted Answer

只是改变：

<a href="#main-nav" class="open-menu">
  ☰
</a>
<a href="#" class="close-menu">
  ☰
</a>

对此：

<a href="#main-nav" class="open-menu">
  >
</a>
<a href="#" class="close-menu">
  <
</a>