How to Position an Icon Over an Image or Video Using CSS?

Positioning an Icon Over an Image or Video

To position an icon over an image or video, you'll need to create a relative container around the image or video. Then, set the position of the icon to be absolute.

`

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

`

In this example, the ".container" class is set to position: relative, and the ".fa-download" class is set to position: absolute. This positions the icon in the bottom left corner of the image.

Working with Bootstrap 3 Font-Awesome

To add a button in the bottom left corner of an image using Bootstrap 3 and Font-Awesome, you can use the following code:

<code class="css">.container { position: relative; }
.container img { display: block; }
.container .btn-download { position: absolute; bottom: 0; left: 0; }</code>

<code class="html"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <img src="https://placekitten.com/300/300">
  <a href="dog.png" download="new-filename" class="btn btn-primary btn-download"><i class="fa fa-download"></i></a>
</div></code>

The above is the detailed content of How to Position an Icon Over an Image or Video Using CSS?. For more information, please follow other related articles on the PHP Chinese website!