如何在图像中显示 Font Awesome 徽标

Question

所以我在大约 50 分钟后关注这个关于如何用 HTML 和 CSS https://www.youtube.com/watch?v=99vHH_6F0Ko&t=3071s&ab_channel=EasyTutorials 构建网站的 Youtube 视频。

我不知道如何让我的字体真棒徽标出现在我的图像中，就像视频一样。我不知道是图像大小还是什么！？！ 如果重要的话，我正在尝试上传一张 360x540 像素的 Elon Musk 的照片。

问题：我认为最好的例子是在 51:00-51:15 分钟的视频中。但是当我在我的网站上使用那个确切的代码时，字体真棒的标志框出现在图像下方，这是没有的好的。我希望 Font Awesome 徽标像视频一样出现在图像中。

我在使用本教程时遇到了一些问题……我是个超级菜鸟。 在我的网站上，我试图创建一行 4 个团队成员图像。当我尝试添加更多个人资料图片时，它只是垂直向下移动到文档中，所有徽标都聚集在底部，而不是像视频中显示的那样水平。我需要专业的帮助请 xD

#team {
  padding-top: 50px;
  padding-bottom: 50px;
  color: #555;
}

h1 {
  text-align: center;
  color: #555 !important;
  padding-bottom: 10px;
}

h1::after {
  content: '';
  background: #007bff;
  display: block;
  height: 3px;
  width: 170px;
  margin: 20px auto 5px;

}
.profile-pic {
  margin-top: 25px;
}

.profile-pic .img-box {
  opacity: 1;
  display: block;
  position: relative;
  }

  .profile-pic .img-box img {
    filter: grayscale(1);
  }

  .profile-pic .img-box img:hover {
    filter: grayscale(0);
    cursor: pointer;

  }

 .profile-pic h2 {
   font-size: 22px;
   font-weight: bold;
   margin-top: 15px;
   color: #007bff !important;
 }

 .profile-pic h3 {
   font-size: 15px;
   font-weight: bold;
   margin-top: 15px;

 }

 #team .fa {
  height: 25px;
  width: 25px;
  color: #007bff !important;
  background: #fff;
  padding: 4px;
  border-radius: 50%;

}

.img-box ul {
  padding: 15px 0;
   position: absolute;
   z-index: 2;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);

}

 <head>
<title>Business Website</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"

  script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
</script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>
</head>
<body>
<section id="team">
  <div class="container">
    <h1>Our Team</h1>
    <div class="row">
      <div class="col-md-3 profile-pic text-center">
        <div class="img-box">
          <img src="images/teampic.png" class="img-fluid">
          <ul>
            <a href="#"><li><i class="fa fa-facebook"></i></li></a>
              <a href="#"><li><i class="fa fa-twitter"></i></li></a>
                <a href="#"><li><i class="fa fa-linkedin"></i></li></a>
            </ul>
            <div>
              <h2>Elon Musk</h2>
              <h3>Founder/CEO</h3>
              <p>Lorem ipsum dolor sit amet,
            consectetur adipisicing elit.</p>
          </div>
       </div>
    </div>
  </div>
</div>
</section>
</body>

Answer 1

除了将它放在img 属性下之外，您实际上可以将它放在div 下并从CSS 中设置background-image。对于水平ul列表，只需要让li元素有显示inline或inline-block即可。

.img-box {
   background-image: url('Your Image URL here');
}

.img-box ul li {
   display: 'inline-block';
}

在我看来，如果ul 元素有直接子元素li 而不是a 会更好，所以我将其更改为：

<ul>
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>

这里是完整的sn-p代码：

#team {
  padding-top: 50px;
  padding-bottom: 50px;
  color: #555;
}

h1 {
  text-align: center;
  color: #555 !important;
  padding-bottom: 10px;
}

h1::after {
  content: '';
  background: #007bff;
  display: block;
  height: 3px;
  width: 170px;
  margin: 20px auto 5px;

}
.profile-pic {
  margin-top: 25px;
}

.profile-pic .img-box {
  opacity: 1;
  display: block;
  position: relative;
  }

  .profile-pic .img-box img {
    filter: grayscale(1);
  }

  .profile-pic .img-box img:hover {
    filter: grayscale(0);
    cursor: pointer;

  }

 .profile-pic h2 {
   font-size: 22px;
   font-weight: bold;
   margin-top: 15px;
   color: #007bff !important;
 }

 .profile-pic h3 {
   font-size: 15px;
   font-weight: bold;
   margin-top: 15px;

 }

 #team .fa {
  height: 25px;
  width: 25px;
  color: #007bff !important;
  background: #fff;
  padding: 4px;
  border-radius: 50%;

}

.img-box {
  background-image: url("https://img.freepik.com/free-vector/white-minimal-background_1393-354.jpg?size=626&ext=jpg");
}

.img-box ul {
  padding: 15px 0;
   position: relative;
   z-index: 2;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
}


.img-box ul li {
  display: inline-block;
}

<head>
<title>Business Website</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"

  script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
</script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>
</head>
<body>
<section id="team">
  <div class="container">
    <h1>Our Team</h1>
    <div class="row">
      <div class="col-md-3 profile-pic text-center">
        <div class="img-box">
          <ul>
            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            </ul>
            <div>
              <h2>Elon Musk</h2>
              <h3>Founder/CEO</h3>
              <p>Lorem ipsum dolor sit amet,
            consectetur adipisicing elit.</p>
          </div>
       </div>
    </div>
  </div>
</div>
</section>
</body>