Estoy tratando de colocar íconos sociales en mi sitio web. Idealmente, en el lado derecho, fijo en el medio.

Mi problema es que lo mejor que puedo sacar es cuando están uno encima del otro en lugar de debajo. Intenté simplemente establecer los márgenes, flexbox, posicionamiento fijo, pero no encuentro la combinación correcta de configuraciones para esto.

.section #icon-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-family: 'Raleway DOts', sans-serif;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

section #icon-bar li {
  position: fixed;
  align-items: center;
  display: block;
  right: 10px;
  top: 50%;
  width: 60px;
  height: 70px;
  margin: 30px;
  list-style: none;
}

section #icon-bar li div {
  width: 120px;
  height: 120px;
  color: #74d4b3;
  font-size: 3.4em;
  text-align: center;
  line-height: 120px;
  background-color: #fff;
  transition: all 0.5s ease;
}
<section>
  <ul id="icon-bar">
    <li>
      <div class="facebook">
        <a href="https://www.facebook.com/>
          <i class=" fa fa-facebook " aria-hidden="true "></i>
        </a>
      </div>
      <span>Facebook</span>
    </li>
    <li>
      <div class="linkedin ">
        <a href="https://www.linkedin.com/ ">
          <i class="fa fa-linkedin " aria-hidden="true "></i>
        </a>
      </div>
      <span>LinkedIn</span>
    </li>
    <li>
      <div class="github ">
        <a href="https://github.com/ ">
          <i class="fa fa-github " aria-hidden="true "></i>
        </a>
      </div>
      <span>Github</span>
    </li>
  </ul>
</section>

Me gustaría tener cada ícono en el lado derecho, en el medio, uno debajo del otro. En este momento, están uno encima del otro. Gracias

0
Ildikó Magda 27 sep. 2019 a las 13:17

1 respuesta

La mejor respuesta

Sí, debes position: fixed ir a la sección y dejar que los demás trabajen por sí mismos.

Y también necesita cambiar .section a section en su css.

Esto puede ayudar

section{
  position: fixed;
  right: 0;
  height: 100vh;
}

section #icon-bar{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Raleway DOts', sans-serif;
  height: 100%;
}

section #icon-bar li {
  text-align: center;
  display:block;
  width: 80px;
  list-style: none;
  margin-bottom: 20px;
}
section #icon-bar li div {
  width: 80px;
  height: 60px;
  color: #74d4b3;
  font-size: 3em;
  background-color: #fff;
  transition: all 0.5s ease;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<section>
  <ul id="icon-bar">
    <li>
      <div class="facebook">
        <a href="https://www.facebook.com/">
          <i class="fa fa-facebook" aria-hidden="true"></i>
        </a>
      </div>
      <span>Facebook</span>
    </li>
    <li>
      <div class="linkedin">
        <a href="https://www.linkedin.com/">
          <i class="fa fa-linkedin" aria-hidden="true"></i>
        </a>
      </div>
      <span>LinkedIn</span>
    </li>
    <li>
      <div class="github">
        <a href="https://github.com/">
          <i class="fa fa-github" aria-hidden="true"></i>
        </a>
      </div>
      <span>Github</span>
    </li>
  </ul>
</section>
1
zPOKOin 27 sep. 2019 a las 10:44