title: Removing Up Arrow and replacing with Down Arrow on button
body: <p>Have a button with Show More with a down arrow. When user clicks the button the text changes to Show Less. I would like to remove the down arrow and add an up arrow.</p>
  
  <p>Jquery</p>
  
  <pre><code>$(document).ready(function() {
        $(".show-more").click(function() {
          $(".more").slideToggle(400);
          return false
        })
      });
  
      $(".show-more").click(function() {
        $(".fade").fadeOut(150, function(){
          $(".fade").html($(".fade").html() == "Show Less" ? "Show More" : "Show Less");
          $(".fade").fadeIn()
        })
      });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.fade:after {
  display: inline-block;
  content: "\f091";
  color: #2f90d5;
  font: normal normal normal 14px/1 "Black Tie";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  vertical-align: -5px;
  padding-left: 10px;
  </code></pre>
  
  <p>}</p>