« Набор простых социальных иконок Social U5 с использованием HTML и CSS »

Описание материала:

Вот некоторые аккуратные социальные иконки под названием Social U5. Этот набор содержит набор значков серого цвета для ВКонтакте (VK), Одноклассники (Ok), Facebook, Twitter, Instagram, Youtube. В Social U5 добавлена легко удаляемая рамка, благодаря которой значки выглядят более компактными, и их будет намного легче интегрировать в дизайн, но вы всегда можете удалить рамку и использовать значки по своему усмотрению - в меню навигации нижнего колонтитула или заголовка, или непосредственно в ваших областях контента.

Подключаем font-awesome:

Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


HTML код:
Код
<div class="center-ufive">
  <div id="social-ufive">
  <ul class="social">
  <li><a href="#"><i class="fa fa-vk" aria-hidden="true"></a></i></li>
  <li><a href="#"><i class="fa fa-odnoklassniki" aria-hidden="true"></i></a></li>
  <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"></a></i></li>
  <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></a></i></li>
  </ul>
  </div>
</div>


CSS код:
Код
.center-ufive {
  display: table;
  width: 100%;
  height: 100vh;
}
#social-ufive {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 30px;
}
#social-ufive .social {
  padding-left: 0px;
}
#social-ufive li {
  display: inline-block;
}
#social-ufive li a {
  color: #aaaebc;
  border-radius: 6px;
  list-style-type: none;
  display: inline-block;
  width: 65px;
  height: 65px;
  line-height: 65px;
  padding: 1%;
  border: 1px solid #aaaebc;
  cursor: pointer;
  margin-left: 10px;
  margin-bottom: 20px;
  transition: ease 0.3s;
}
#social-ufive li a:hover {
  color: #ffb76d;
  border: 1px solid #ffb76d;
}
.social:hover > li {
  opacity: 0.1;
}
.social:hover > li:hover {
  opacity: 1;
}


Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 45


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
avatar