将字体真棒图标添加到css面板

Question

我将这个基于CSS3的面板垂直滑出。如何在关闭/打开面板按钮中添加2x fontawesome图标或任何图标，这将显示一个用于打开的图标和另一个用于关闭的关闭图标？非常感谢您的帮助。

* {
  margin:0;
  padding:0;
  font-family:"Helvetica Neue", Helvetica, Sans-serif;
  word-spacing:-2px;
}

h1 {
  font-size:40px;
  font-weight:bold;
  color:#191919;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-weight:normal;
  font-size:20px;
  color:#888;
  padding:5px 0;
}

.message {
  background:#181818;
  color:#FFF;
  position: absolute;
  top: -250px;
  left: 0;
  width: 100%;
  height: 250px;
  padding: 20px;
  transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  overflow: hidden;
  box-sizing: border-box;
}

.message h1 {
  color:#FFF;
}

#toggle {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: #26ae90;
  width: 100px;
  border-radius: 3px;
  padding: 8px 10px;
  color: #FFF;
  line-height:20px;
  font-size:12px;
  text-align:center;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  margin:20px 50px;
  transition:all 500ms ease;
}

#toggle + label:after {
  content:"Open" 
}

.container {
  transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}

#toggle:checked ~ .message {
  top: 0;
}

#toggle:checked ~ .container {
  margin-top: 250px;
}

#toggle:checked + label {
  background:#dd6149;
}

#toggle:checked + label:after {
  content:"Close"
}

<input type="checkbox" name="toggle" id="toggle"/>
<label for="toggle"></label>

<div class="container">
  <h1>Pure CSS3 Slide Down Toggle Demo</h1>
  <h2>Click the Open button to see content</h2>
</div>

<div class="message">
  <h1>Hidden message here</h1>
  <h2>CSS3 slide out menu</h2>
</div>

Answer 1

我认为这就是你想要的：

打开：

#toggle + label:before {
    font-family: 'FontAwesome';
    content:"\f054";
}
#toggle + label:after {
  content:"Open"        
}

关闭：

#toggle:checked + label:before{
    font-family: 'FontAwesome';
    content:"\f0c9";
}
#toggle:checked + label:after {
  content:"Close"
}

https://jsfiddle.net/z57b2e2c/1/