如何将图标放置在图像上？ [英] How can I position an icon over an image?

问题描述

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

如下：

相关编码

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<!-- 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字体吗？我可能想在左下角添加一个这样的按钮：

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

推荐答案

图像周围需要一个相对容器，然后将图标设置为位置：absolute。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.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可停止此操作。

这篇关于如何将图标放置在图像上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！