title: Before and after icon for Accordion menu on website
body: <p>I am trying to use the code from <a href="http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol" rel="nofollow noreferrer">this source</a> to add an accordian menu to my website. Everything works, except for the + and - icons that signify the menu being open or closed. <a href="https://i.stack.imgur.com/A9pu6.png" rel="nofollow noreferrer">On my site, the icons appear below the words.</a> </p>
  
  <p>How can I get the icons to appear centered to the left of the words, like they do in the original source code?</p>
  
  <p><em>Edit</em>
  Sorry, I thought the link to the source code was good enough since I just copied and pasted it to my site.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var acc = document.getElementsByClassName("accordion");
  var i;
  
  for (i = 0; i &lt; acc.length; i++) {
    acc[i].onclick = function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
       panel.style.maxHeight = null;
      } else {
       panel.style.maxHeight = panel.scrollHeight + 'px';
      } 
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button.accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
  }
  
  button.accordion.active, button.accordion:hover {
      background-color: #ddd;
  }
  
  button.accordion:after {
      content: '\002B';
      color: #777;
      font-weight: bold;
      float: right;
      margin-left: 5px;
  }
  
  button.accordion.active:after {
      content: "\2212";
  }
  
  div.panel {
      padding: 0 18px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 class="subsection_title"&gt; Baby Sleeping Tips By Timeframe&lt;/h1&gt;
  &lt;p&gt;
  Here are suggestions that most parents agree are worth trying during each phase:
  &lt;/p&gt;
  &lt;button class="accordion"&gt;&lt;b&gt;From 0 To 2 Months&lt;/b&gt;&lt;br&gt;&lt;p class="small"&gt; Babies sleep regularly and often for the first couple of weeks. Put them down to sleep when you start to see the first signs of drowsiness (like drooping eyelids or some fussiness).
  &lt;/p&gt;&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>