Positionieren eines Symbols über einem Bild oder Video

Problem:
Sie müssen ein Symbol darüber positionieren ein Bild oder Video und richten Sie es an der unteren linken Ecke aus. Wenn Sie darauf klicken, sollte das Symbol eine Download-Aufforderung für das Bild auslösen.

Lösung:
Um die gewünschte Positionierung zu erreichen, müssen Sie einen relativen Container um das Bild erstellen. Stellen Sie dann die Position des Symbols auf „absolut“ ein. Hier ist ein Codebeispiel:

.container {
  position: relative;
}

.container img {
  display: block;
}

.container .fa-download {
  position: absolute;
  bottom: 0;
  left: 0;
}

Bootstrap 3 Font-Awesome:
Ja, die gleiche Methode funktioniert für Bootstrap 3 Font-Awesome. Ersetzen Sie die Font Awesome-Version im obigen Code durch Folgendes: