切换显示的图标关闭javascript

Question

I am creating a off canvas menu. I am trying to get it so that when the close toggle is in effect it will just show the menu icons.

I am having a bit of trouble trying to work it out so just can see icons when off canvas is closed and when off canvas is open will be able to see whole links.

Also can not seem to position the header at top of side bar where sidebar is under neath, can only get header on side.

Live Example: http://codepen.io/riwakawebsitedesigns/pen/oxwzt

Code

<div class="wrapper">

<div class="offcanvas-header">
        <i class="fa fa-dedent fa-lg toggle"></i>
</div>

<nav class="offcanvas">
    <ul>
        <li><a href="#"><i class="fa fa-dedent fa-lg"></i> Home</a></li>
        <li><a href="#"><i class="fa fa-dedent fa-lg"></i> About</a></li>
        <li><a href="#"><i class="fa fa-dedent fa-lg"></i> Portfolio</a></li>
        <li><a href="#"><i class="fa fa-dedent fa-lg"></i> Contact me</a></li>
    </ul>
</nav>

<div id="page-wrapper">
<main>
</main>
</div>

</div>

<script type="text/javascript">
$(function() {
  var wrapper = $(".wrapper"),
      toggle = $(".toggle"),
      nav = $(".offcanvas");
  toggle.on("click", function() {
    wrapper.toggleClass("nav-open");
    // Change the font-awesome icons on click.
    toggle.toggleClass("fa fa-dedent fa-lg");
    toggle.toggleClass("fa fa-dedent fa-lg");
  });


     $(window).on("click", function(e) {
        if (
          wrapper.hasClass("nav-open") && 
          !$(e.target).parents(nav).hasClass("offcanvas") && 
          !$(e.target).hasClass("toggle")
        ) {
            wrapper.removeClass("nav-open");
          }
      });

});
</script>

CSS

/* Reset */

h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0 !important;
    margin: 0 !important;
}


body {
    margin: 0;
    padding: 0;
}

.wrapper {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.offcanvas-header {
    background: none repeat scroll 0 0 #ffffff;
   border-bottom: 1px solid #e5e5e5;
   margin: 0;
   padding: 0;
   height: 50px;
}

.offcanvas-header i {
    line-height: 50px;
    color: #6D6D6D;
    font-weight: bold;
    padding-left: 20px;
    font-size: 2rem;
}

.toggle {
    color: #eee;
    cursor: pointer;
    position: relative;
    top: 0px;
    left: 0px;
}

.offcanvas {
    background-color: #515151;
    border-right: 1px solid #515151;
    height: 100%;
   padding-top: 50px;
    transition: all 0.3s ease 0s;
    color: #fff;
    position: fixed;
    top: 0;
    left: -231px;
    width: 210px;
    height: 100%;
    padding: 10px;
}

.offcanvas ul {
    margin: 0;
    padding: 0;
}

.offcanvas ul li {
    list-style: none;
    position:relative;
    margin: 0;
    padding: 0;
}

.offcanvas ul li a {
    display: block;
    position:relative;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #585858;
   color: #c4c4c4;
   font-size: 14px;
   padding-left: 0;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.offcanvas ul li a i {
    padding-right: 10px;
    font-size: 14px;
}

.offcanvas ul li a:hover {
    color: white;
    font-weight: bold;
}

.nav-open {
    left: 231px;
}

.nav-open .offcanvas {
  left: 0;
}

.wrapper, .offcanvas {
    -webkit-transition: left .2s ease;
    transition: left .2s ease;
}

Answer 1

You could float the icons to the right. and the remove that when the nav is open.

a .fa {
  float: right;
}

.nav-open a .fa {
  float: none;
}

Codepen Demo