cachaito
12/1/2014 - 9:53 PM

Hamburger icon

Hamburger icon with unicode and pure css way (IE8 support)

:before { content:'\2261'; } albo: \2630 <- remember to add font-face to pseudo element! It's UTF-16 (hex)

hamburger icon.html
content_copyfile_download
<!-- unicode version -->

<style>
  font: bold 36px Sans-Serif;
</style>

<button class="mobile-menu">&#9776;</button> <!-- or &equiv;  or &#8803; -->

<!-- css version -->

<style>
  .menu-icon {
    position:relative;
    display:inline-block;
    width:70px;
    text-indent:-999px;
}
 
.border-icon {
    height:30px;
    border-top:10px solid #fff;
    border-bottom:10px solid #fff;
}
 
.border-icon:before {
    content:"";
    position:absolute;
    top:10px;
    left:0;
    width:100%;
    border-top:10px solid #fff;
}
</style>