Мне нравиться использовать шрифтовые иконки из библиотеки FontAwesome , потому что их легко кастомизировать под любую цветовую гамму сайта.
Мне нравиться использовать шрифтовые иконки из библиотеки FontAwesome, потому что их легко кастомизировать под любую цветовую гамму сайта.
HTML разметка + центрирование + ссылка на FontAwesome
Названия классы нужных иконок мы копируем из библиотеки FontAwesome и вставляем их в тег i.
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>
// позиционирование иконок в центре экрана
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f5f5f5;
}
Меняем расположения иконок
По умолчанию иконки расположены вертикально, но это легко изменить, если создать гибкий контейнер для тегов li. Свойство display: flex поменяет ориентацию позиции иконок на вертикальную.
ul{
position: relative;
display: flex; / * гибкий контейнер * /
}
ul li{
position: relative;
list-style: none;/ * удаление маркеров * /
}
Стилизация иконок
Умелое использование CSS-свойств, может привести к эффектному результату.
ul li a{
position: relative;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
margin: 0 10px;
text-decoration: none; / * убираем подчеркивание * /
font-size: 30px;
border-radius: 50%; / * рисование круга * /
color: #e2e2e2;
box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2), / * создание теней * /
2px 2px 5px rgba(0,0,0,0.2);
transition: 0.5s; / * плавный переход * /
}
Псевдоэлемент before придаст завершенный вид иконкам.
ul li a .fa {
color: #fff;
position: relative;
z-index: 1; / * иконку на верхний слой * /
}
ul li a:before {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.1);
background: #cfd8dc;
}
Эффект при наведении
При наведении мыши, иконки будут плавно приподниматься вверх, подтягивая за собой едва заметную мягкую тень.
ul li a:hover{
color: #999;
transform: translateY(-20px); / * трансформация вверх на 20 пикселей * /
box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2), / * создание теней * /
2px 24px 10px rgba(0,0,0,0.1);
}
Посмотрите пример на CodePen
