Как разместить значок над изображением? - PullRequest
Новая
       52

Как разместить значок над изображением?

0 голосов
/ 04 февраля 2019

Как разместить значок загрузки FontAwesome над изображением?Я хочу, чтобы это было в левом нижнем углу изображения.Когда пользователь нажимает на значок загрузки, появляется подсказка с вопросом, хотят ли они загрузить изображение.

Примерно так:

enter image description here

Соответствующий код 

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

Этот метод также работает с начальной загрузкой 3 font-awesome?Я мог бы добавить такую ​​кнопку в левом нижнем углу:

enter image description here

Bootstrap потрясающий шрифт: https://fontawesome.com/v4.7.0/examples/

Ответы [ 3 ]

0 голосов
/ 04 февраля 2019

Вам нужен относительный контейнер вокруг вашего изображения, а затем вы устанавливаете иконку в положение: 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 останавливает это.

0 голосов
/ 04 февраля 2019

Для наложения двух элементов один из подходов заключается в создании родительского элемента 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>
0 голосов
/ 04 февраля 2019

Я думаю, что вы можете решить это, используя свойство 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>
...