Как сделать hover на font-awesome на всю кнопку?

Question

[freeman0204]

Код я сделал пока только по ширине если навести на кнопку по ширине то сразу подсвечивается ховер font-awesome а если по высоте то не получается. Как можно сделать?
Просто иконки небольшие и наводить неудобно + у меня на них анимация и при наведении она то включается то нет так как то попадает мышка на иконку то нет.

И мне кажется что иконки по высоте не ровные, хотя я выровнял по вертикали,

vertical-align: middle;
 display: table-cell;

Answer 1

[westdp]

.social {
    text-aligin: center;
    border-spacing: 3px 0;
    /*Внешние отступы, применить нужно к родителю*/
    margin-bottom: 15px;
}

 .social li {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    background-color: #36aaff;
   line-height: 30px;
}

.social li:hover {
    background-color: #ffe13b;
    cursor: pointer;
}

.social .fa {
    color: #fff;
    width: 100%;
}

.social li:hover .fa {
    color: #594f15;
}

Я тебя правильно понял?
Или нет?

Answer 2

[Андрей Федоров]

Тишкина етишка, объясняете вы конечно ОЧЕНЬ понятно... Вот то что вам надо codepen.io/aliencash/pen/EPqWKK Если я правильно понял...

Comments

[freeman0204]

Вы правильно поняли. Да, так. Но где теперь отступы?)

[Андрей Федоров]

Артур Черешнюк: У каких элементов? Между чем и чем?

[freeman0204]

Андрей Федоров: screenshot.ru/0dc246525c78ff58eb76441d2be0e4f0

[Андрей Федоров]

Артур Черешнюк: И что? Отступ между кнопками есть. В чем проблема?

[freeman0204]

Андрей Федоров: screenshot.ru/8ea5dacb9eb1f90edfe4d624db44694b странно у меня нет. Браузер хром.

[Андрей Федоров]

Артур Черешнюк: А... Вот сначала создаете проблемы, а потом из героически преодолеваете... Сделайте для .social

.social {
    display: block;
    /*Внешние отступы, применить нужно к родителю*/
    margin-bottom: 15px;
}