align font awesome icons - Html

JustAK
March 16, 2023
194 views
0 votes
2 Answers

I’m trying to make 3 fa icons to be side to side and I don’t know how to do it.

My code:

<div class="footer">
  <p style="text-align: center;">Social media:</p>
  <ul style="list-style: none">
    <li><a href="https://www.youtube.com/channel/UCxEM75DEH_ncOts-JnVpZxg"><i class="fa fa-youtube justify-content-center" style="font-size: 36px;"></i></a></li>

    <li><a href="https://instagram.com/l_justak_l?igshid=ZDdkNTZiNTM="><i class="fa fa-instagram justify-content-center" style="font-size: 36px"></i></a></li>

    <li><a href=""><i class="fa fa-twitter justify-content-center" style="font-size: 36px"></i></a></li>
  </ul>
  <p style="text-align: center;">Copyright &COPY;2023 by </p>
</div>

Tags: html netbeans

Answers

I see you use Bootstrap. I think i would solve it this way (BS 5.2.3 + FA 6.3.0):

<div class="footer text-center">
  <p>Social media:</p>
  <ul class="list-unstyled d-inline-flex">
    <li>
      <a href="https://www.youtube.com/channel/UCxEM75DEH_ncOts-JnVpZxg">
        <i class="fab fa-youtube fa-2x me-1"></i>
      </a>
    </li>
    <li>
      <a href="https://instagram.com/l_justak_l?igshid=ZDdkNTZiNTM=">
        <i class="fab fa-instagram fa-2x me-1"></i>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fab fa-twitter fa-2x"></i>
      </a>
    </li>
  </ul>
  <p>Copyright &COPY;2023 by</p>
</div>

First of all try to use semantic html, I mean instead of a div for footer try to use a footer tag:

body,
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

footer {
  text-align: center;
}

ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

a {
  text-decoration: none;
}

<footer class="footer">
  <h2>Social media</h2>
  <ul>
    <li>
      <a href="https://www.youtube.com/channel/UCxEM75DEH_ncOts-JnVpZxg">
        <i class="fab fa-youtube fa-2x me-1"></i>
      </a>
    </li>
    <li>
      <a href="https://instagram.com/l_justak_l?igshid=ZDdkNTZiNTM=">
        <i class="fab fa-instagram fa-2x me-1"></i>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fab fa-twitter fa-2x"></i>
      </a>
    </li>
  </ul>
  <p>Copyright &COPY;2023 by</p>
</footer>

this snippet will create an unordered list of your icons, for making them side by side you need to add some styles too:

Please signup or login to give your own answer.

Click here to cancel reply.

align font awesome icons – Html

Answers