Menu
How do I position a FontAwesome download icon over an image? I want it to be on the bottom left corner of the image. When the user clicks on the download icon, a prompt appears asking if they would like to download the image.
Like so:
Relevant code
<!-- 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">Does this method also work with bootstrap 3 font-awesome? I might want to add a button like this on the bottom left corner:
Bootstrap awesome font: https://fontawesome.com/v4.7.0/examples/
722
To overlay two elements, one approach is to make a parent position: relative , and then the overlay position: absolute . In this case, this example should work, where the download icon can be any element, such as a bootstrap button.
Assign the Positions This is the most important step. The first step to enclose the components along with the image as one element and assign the CSS property position: relative . And the icons we need to place on the image is assigned the property position: absolute . In this case, we are adding the class .
Overlay icons are small icons displayed on elements in Windows Explorer. Their purpose is to give you quick information on the encryption state of files. The appearance of the icons depends on the module you have installed. The Data Exchange overlay icons are only displayed on files and volumes.
In short, CSS overlay effects are achieved by using the following: background-image and background CSS properties to add image and linear-gradient overlay effect. position:absolute , top , bottom , right , left CSS properties to control the position of overlay image or text.
You need a relative container around your image and then you set your icon to be 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>The reason why you need you img to be display: block is because, by default, img's are display: inline and your img will have a space between the bottom of it and the bottom of the container - so your download icon will appear slightly below your img. Setting it to display: block stops this.
69
To overlay two elements, one approach is to make a parent position: relative, and then the overlay position: absolute.
In this case, this example should work, where the download icon can be any element, such as a bootstrap button.
.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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
