Comment positionner une icône sur une image ou une vidéo à l'aide de CSS ?

Positionnement d'une icône sur une image ou une vidéo

Pour positionner une icône sur une image ou une vidéo, vous devrez créer un relatif conteneur autour de l’image ou de la vidéo. Ensuite, définissez la position de l'icône sur absolue.

`

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

`

Dans cet exemple, la classe ".container" est définie sur position : relative , et la classe ".fa-download" est définie sur position : absolue. Cela positionne l'icône dans le coin inférieur gauche de l'image.

Travailler avec Bootstrap 3 Font-Awesome

Pour ajouter un bouton dans le coin inférieur gauche d'une image en utilisant Bootstrap 3 et Font-Awesome, vous pouvez utiliser le code suivant :

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!