Олег

Я понимаю, что проблема уже решилась, но я должен это написать.

overflow: hidden;

plnkr.co/edit/MlvlWcqZdGY78MJ2XtIv?p=preview

В
visibility: hidden;
opacity: 0;
?

Во-первых прекращай использовать important - это плохая практика. Если без них нельзя обойтись, значит что-то не так.

Во-вторых не надо в медиа-запросах писать одинаковые стили. Там ты пишешь только различия.

В-третьих лучше придерживаться либо только max-width, либо min-width. Не надо мешать всё это в кучу. Тебе же проще потом будет.

Твой код следует написать примерно так:

.social_wrapper
	text-align: center

	a
		padding: 0
		margin: 0
		z-index: 5

@media only screen and (min-width : 480px)
.social_wrapper

	i.facebook
		display: none

@media only screen and (min-width : 991px)
.social_wrapper

	i.facebook
		display: block

Всё правильно сказали. Делаешь border: 1px solid transparent. А при hover задаёшь нужный цвет.
Есть ещё один вариант, использовать вместо border - outline. Но у него некоторые особенности. Он не занимает места в потоке, а значит может скрывать под собой другие элементы. И ещё его можно задать только сразу для всех сторон.