float css menu with svg icons horizontal

how to align custom icon without font awesome

<div class="top">
<ul>
  <li class="a">
    <div class="main">
      <div class="sub-main">
        <i class="facebook">
        </i>
      </div>
    </div>
  </li>
  <li class="b">
    <div class="main">
      <div class="sub-main">
        <i class="youtube">
        </i>
      </div>
    </div>
  </li>
  <li class="c">
    <div class="main">
      <div class="sub-main">
        <i class="instagram">
        </i>
      </div>
    </div>
  </li>
</ul>
</div>





.top {
  display: inline-block;
ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  li {
    display: inline;
    position: relative;
    .main {
      display: inline-block;
      border: 2px solid grey;
      padding: .8rem;
      border-radius: 50%;
      position: relative;
      z-index: -20;
      background: #d6d6d6;;
      .sub-main {
      i{
        height: 1.5rem;
        width: 1.5rem;
        display: block;
        background-size: contain;
      }
      .facebook{
        background-image: url('../../../../assets/socialicon/facebook (1).svg');
      }
      .youtube{
        background-image: url('../../../../assets/socialicon/youtube.svg');
      }
      .instagram{
        background-image: url('../../../../assets/socialicon/instagram.svg');
      }
      }
    }
    &.a {

    }
    &.b {
      right: 1rem;
      z-index: -21;
    }
    &.c {
      right: 2rem;
      z-index: -22;
    }

  }
}
}

Posted by: Guest on April-29-2020

Code answers related to "float css menu with svg icons horizontal"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Answers for "float css menu with svg icons horizontal"

Code answers related to "float css menu with svg icons horizontal"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us