JSFiddle - React, Tailwind, and code Playground

Mobile Navigation Icons

by bitstarr

HTML

<ul>
  <li class="icon-css">
    <a href="#">CSS-only menu icon</a>
  </li>
</ul>


<ul>
  <li class="icon-unicode">
    <a href="#">Unicode character</a>
  </li>
</ul>

CSS

body {
  background:#5a5a5a;
  font-family:"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  text-align:center;
  padding:2.618em;
}

ul {
  list-style:none;
}

li {
  font-weight:bold;
}

a {
  color: #fff;
  text-decoration:none;
  position: relative;
}

li.icon-css a {
  padding-left:1.2em
}

li.icon-css a:before {
  content:'';
  position:absolute;
  top: 27%;
  left:0px;
  width:.75em; /* 12px/16px */
  height:.125em; /* 2px/16px */
  border-top: .375em double #fff; /* 6px/16px */
  border-bottom: .125em solid #fff; /* 2px / 16px */
}

li.icon-unicode {
  text-align:center;
}

li.icon-unicode a:before {
  content:'\2261';
  margin-right:0.6em;
}