Уже трудно себе представить современный сайт без иконок соц. сетей и мы их видим на большинстве сайтах. Откуда же берутся эти иконки? Насчет этого можно не беспокоиться, в сети распространяется огромное количество наборов бесплатных иконок на любой вкус в виде картинок.
Уже трудно себе представить современный сайт без иконок соц. сетей и мы их видим на большинстве сайтах. Откуда же берутся эти иконки? Насчет этого можно не беспокоиться, в сети распространяется огромное количество наборов бесплатных иконок на любой вкус в виде картинок.
Другой вопрос подходят ли они по стилю для вашего сайта, не отвлекают ли от контента? А сами то Вы как думаете, когда видите красно-сине-зеленые ляпистые кнопки, одинаковые на всех сайтах, как в инкубаторе.
В любом случае, если ваш сайт претендует хоть на какой-то дизайнерский стиль, то и иконки соц. сетей тоже должны стремиться к единообразию с дизайном сайта.
Иконочный шрифт Font Awesome
как нельзя кстати хорошо подходит для создания иконок соц. сетей на сайте. Давайте рассмотрим все преимущества:
- легкость внедрения в проект
- масштабируются без потери качества
- не создают http-запросов к серверу
- большой выбор векторных иконок
- легко стилизовать под свой дизайн
Сделаем HTML разметку
Создадим контейнер div с классом box, внутри которого поместим пять пунктов списка ul. В каждый пункт списка li поместим блок dlv с классом icon, внутри которых теги i с классами нужных вам иконок.
<div class="box">
<ul>
<li>
<div class="icon">
<i class="fab fa-facebook"></i>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-twitter"></i>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-youtube"></i>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-pinterest-p"></i>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-google-plus"></i>
</div>
</li>
</ul>
</div>
На сайте fontawesome.com, находим нужные иконки и копируем код в свой HTML-файл.
<i class="fab fa-google-plus"></i>
Подключаем иконочный шрифт, путем копирования строки с кодом и вставки между тегами head.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
Иконки соц. сетей появились на странице, теперь предстоит их стилизация.
CSS-код
Разместим иконки в центре, для этого пропишем контейнеру с классом box код ниже.
.box {
text-align: center;
Убираем у списков ul маркеры и задаем отступ сверху 60 пикселей.
.box ul {
list-style: none;
margin-top: 60px;
}
Прорисовываем блоки списка с заданной шириной и высотой, белого цвета с рамкой под цвет фон. Она не должна быть видна в обычном состоянии, а будет появляться более темного цвета только при наведении курсора.
.box ul li {
width: 40px;
height: 40px;
background: #fff;
border: solid 4px #ea86c6;
}
Отобразим список в строку:
display: inline-block;
На картинке иконки стоят не по центру, маленького размера и неправильного цвета.
Работа с классом icon
Опускаем иконки на 15% вниз:
.icon {
margin-top: 15%;
}
Задаем цвет такой же как у фона страницы и увеличиваем размер в любых относительных единицах. Это позволит на супер больших мониторах, не потерять в качестве.
color: #ea86c6;
font-size: 1.7em;
Можно было бы на этом остановиться, но тогда зачем мы делали рамку у пунктов списка?
Hover эффект для иконок
Создадим hover эффект, при котором при наведении курсора, у рамок меняться цвет.
.box ul li:hover {
border: solid 4px #b63a64;
}
У иконок изменится цвет и увеличится размер:
.box ul li:hover .icon {
font-size: 1.5em;
color: #b63a64;
}
Демонстрация hover эффекта
Плавность hover эффекта достигается свойству transition. На codepen вы можете посмотреть, каким элементам это свойство задано.
See the Pen Social icons Font Awesome by porsake (@porsake) on CodePen.
