netbeans 对齐字体真棒图标

vs91vp4v 于 2023-03-18 发布在其他

关注(0)|答案(2)|浏览(169)

我试图使3个图标的FA并排，我不知道如何做到这一点。
我的代码：

<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>
    <nav class="navbar navbar-expand-sm navbar-light justify-content-center" style="background-color:#DEDEDE">
        <a></a>

netbeans

来源：https://stackoverflow.com/questions/75754969/align-font-awesome-icons

2条答案

按热度按时间

jfewjypa1#

我看到你使用Bootstrap。我想我会这样解决它（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>

赞(0）回复(0）举报 2023-03-18

83qze16e2#

首先尝试使用语义html，我的意思是不要使用div作为页脚，而是尝试使用footer标记：

<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>

这个代码片段将创建一个无序的图标列表，为了使它们并排，你也需要添加一些样式：

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

ul {
  list-style: none;
  display: flex;
  align-items: center;
}

a {
  text-decoration: none;
}

赞(0）回复(0）举报 2023-03-18

我来回答

netbeans 对齐字体真棒图标

2条答案

相关问题

热门标签

最新问答