<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div>
  <i class="fa fa-facebook"></i>

    <ul>
      <li><a href="#">Ссылка1</a></li>
      <li><a href="#">Ссылка2</a></li>
      <li><a href="#">Ссылка3</a></li>
      <li><a href="#">Ссылка4</a></li>
    </ul>
    <i class="fa fa-shopping-basket"></i>
    <label>
    <input type="checkbox" id="ch">
    <i class="fa fa-search"></i>
    <input type="search" id="se">
     <span class="um">&#10006;</span>
  </label>

</div>

*{
  list-style: none;
  text-decoration: none;
}
a{
  margin-right: 20px;
}
div{
  position: relative;
}

[type="search"]{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 0.14s linear;
}

input:checked ~ [type="search"]{
  opacity: 1;
  visibility: visible;
}

div,ul,label{
  display: flex;
  align-items: center;
}

ul{
  margin-left: auto;
  margin-right: 20px;
}

label{
  margin-right: 10px;
}

[type="checkbox"]{
  display: none;
}

.um{
  position: absolute;
  right: 20px;
  top: 50%;
  font-size: 30px;
  transform: translate(0, -50%);
  opacity: 0;
  visibility: hidden;
  transition: 0.34s linear;
  transition-delay: 0.1s;
}

input:checked ~ .um{
  opacity: 1;
  visibility: visible;
  z-index: 100;
}

i.fa.fa-facebook{
  font-size: 50px;
}

.fa.fa-shopping-basket{
  margin-right: 20px;
}