html - 在 img 上带有图标的 Angular 标签

Question

我在 HTML 中有一张图片，当用户点击该图片时，我想在 Angular 标签上加上图标。

有人可以帮我创建一个 css 类，我可以将其添加到一个 Angular 标签上，并带有一个图标，如附件中所示。

所以我的代码如下所示

<div> 
  <img src="blahblah.jpg">
  <img src="another.jpg" class="image-label">
  <i class="fa fa-heart"></i>
</div>

在这种情况下，第一张图片会正常显示。第二个将具有 Angular 标签/图标组合，如附图所示。

有人能告诉我什么 image-label css 类会放置一个带有背景颜色(例如蓝色)的 Angular ，然后将 Font Awesome “心形”图标放在该 Angular 标签/图标的中心作为如图所示。

谢谢!

Answer 1

很明显，您正在为心脏使用超棒的字体，因此不需要其他图像。使用一个 div 来容纳图标并像这样用 border-radius 定位它

.image-container{
  width:200px;
  height:200px;
  position:relative;
  margin:100px;
}
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.image-label{
  width:60px;
  height: 60px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:100%;
  background:skyblue;
  font-size:30px;
  position:absolute;
  top:0;
  right:0;
  transform:translate(50%,-50%);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
  <img src="https://www.gqmiddleeast.com/sites/default/files/gqme/styles/766_431_landscape/public/images/2019/06/12/Tony-Stark.jpg?itok=7-QNeRCi">
  <div class="image-label">
    <i class="fa fa-heart"></i>
  </div>
</div>

希望对您有所帮助!