如何在图像上放置图标？

Question

如何将 FontAwesome 下载图标放置在图像上？我希望它位于图像的左下角。当用户单击下载图标时，会出现一个提示，询问他们是否要下载图像。

像这样：

相关代码

 <!-- font awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<!-- download icon -->
<a href="https://loremflickr.com/320/240/dog" download="new-filename"><i class="fas fa-download"></i></a>

<!-- image of dog -->
<img src="https://loremflickr.com/320/240/dog" alt="dog">

这种方法是否也适用于 bootstrap 3 font-awesome？我可能想在左下角添加一个这样的按钮：

Bootstrap 真棒字体： https ://fontawesome.com/v4.7.0/examples/

原文由 cooldood3490 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要在图像周围放置一个相对容器，然后将图标设置为 position: absolute 。

 .container { position: relative; }
.container img { display: block; }
.container .fa-download { position: absolute; bottom:0; left:0; }

 <link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>

<div class="container">
   <img src="https://placekitten.com/300/300">
   <a href="dog.png" download="new-filename"><i class="fas fa-download"></i></a>
</div>

您需要 img 为 display: block 的原因是，默认情况下， img 是 display: inline 并且您的 img 底部之间有一个空格它和容器的底部 - 所以您的下载图标将略低于您的 img 。将其设置为 display: block 停止此操作。

原文由 Adam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

要叠加两个元素，一种方法是创建父 position: relative ，然后叠加 position: absolute 。

在这种情况下，这个示例应该可以工作，其中下载图标可以是任何元素，例如引导按钮。

 .img-download {
  position: relative;
}

.img-download > a {
  position: absolute;
  background: white;
  bottom: 0;
  left: 0;
}

 <!-- font awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="img-download">
  <!-- image of dog -->
  <img src="https://loremflickr.com/320/240/dog" width="320" height="240" alt="dog">

  <!-- download icon -->
  <a href="https://loremflickr.com/320/240/dog" download="dog.jpg"><i class="fas fa-download"></i> Download</a>
</div>

原文由 Charlie Harding 发布，翻译遵循 CC BY-SA 4.0 许可协议