适应CSS滑出面板示例

Question

我正在尝试从here调整优秀的幻灯片面板示例。

改编的代码为here

我喜欢隐藏/展开状态的不同图标（类似于＆gt;隐藏时，＆lt;展开时）。是否可以通过更改上述代码。最终我可以使用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替换为带有.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:">";
}

Answer 2

只需改变：

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

演示：http://codepen.io/anon/pen/nImtd