Как изменить позиционирование смайлика\иконки?

Question

[Сергей]

Подскажите как сделать так, чтобы иконка(из FontAwesome) появлялась внутри каждой даты при наведении на ячейку. Получилось только сделать появление иконки, но не в том месте.
https://codepen.io/babytype-the-typescripter/pen/o...

Comments

[Ankhena]

Абсолюты позиционируются относительно ближайшего родителя с позиционированием отличным от static. Обычно это relative (если родителю самому не нужно другое позиционирование).
Из этого и исходите.

А у вас относительно body.

[Сергей]

Ankhena, Относительно чего тогда позиционироваться?

[Ankhena]

Сергей, эмммм... вы же сами в вопросе пишете, что нужно, чтобы внутри квадратика даты было... Относительно него и позиционируйте.

[Сергей]

пока не получилось... =(

[Ankhena]

Сергей, даже не могу представить как может не получиться написать position:relative для этих div.

Ну смотрите, так вам надо?
https://codepen.io/AnnaSummer/pen/yLjYmEW

[Сергей]

Ankhena, я тоже благодаря подсказке Евгения сделал... но ваш вариант еще лучше ! Спасибо

Answer 1

[Евгений Ширяев]

Прописывайте иконку только на hover, а ".days div:before" уберите.

.days div:hover:before {
    left: 7px;
    position: relative;
    font-family: FontAwesome;
    content: "\f044";
}