如何在图像上放置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一起使用吗?我可能想在左下角添加这样的按钮:
答案 0 :(得分:4)
您需要在图像周围放置一个相对的容器,然后将图标设置为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
即可停止。
答案 1 :(得分:3)
要覆盖两个元素,一种方法是先创建父元素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>
答案 2 :(得分:1)
我认为您可以使用z-index属性解决此问题。试试这个:
<img style="z-index: 1;" src="dog.png" alt="dog">
<a style="z-index:2" href="dog.png" download="new-filename"><i class="fas fa-download"></i></a>