Делаем блок с социальными кнопками своими руками

Всем привет! В этой статье, хочу рассказать, как я сделал кнопки социальных сетей на сайт.

Увидеть который можно, в самом низу сайта.

В отличие от плагинов, которые предоставляют такую возможность, здесь, каждой кнопке можно привязать любую ссылку.

Также будем использовать иконочный шрифт, которые а это означает, что цвет и размер иконок, можно будет менять в любое время, как и обычные шрифт.

Давайте начнем с самого начала!

Подключим иконочный шрифт к сайту.
Составим HTML структуру блока
Пропишем стили к блоку

После того, как скачали и подключили иконочный шрифт, нам необходимо выбрать иконки которые будем использовать!

Для этого на сайте Fontawesome.ru переходим в раздел Иконки, и здесь выбираем.

Для нашего блока нам нужен

Фотоаппарат
Иконка для настроек (шестеренка)
Вконтакте
Конверт
RSS

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

Находим все нужные иконки и выписываем ссылки при помощи которых можно их вызывать.

Теперь, создадим структуру блока:

<ul class="btn">
<li><a href="ваша ссылка"> <i class="fa fa-camera-retro"></i></a></li>
<li><a href="ваша ссылка"> <i class="fa fa-cog"></i></a></li>
<li><a href="ваша ссылка"> <i class="fa fa-vk"></i></a></li>
<li><a href="ваша ссылка"> <i class="fa fa-envelope-o"></i></a></li>
<li><a href="ваша ссылка"> <i class="fa fa-rss"></i></a></li>
</ul>

После чего, откройте Внешний вид — Виджеты, выберите Текст, и разместите данный код в сайдбаре или в футере.

Теперь, необходимо прописать стили. Для этого, откройте файл Style.css и в самом конце добавьте код

ul.btn {margin: 0px !important;
padding: 0px;
list-style: outside none none;
height: 45px;
border: none;
   }
ul.btn li {width: 42px;
height: 40px;
display: inline-block;
padding: 0px 0px 20px;
margin: 0px 5px 0px 0px;}
ul.btn12 li a {padding: 0px;
margin: 0px;
border:none;
color: #444;
}

Если вы хотите, чтобы цвет иконок менялся при наведении курсора, то добавьте ниже

ul.btn li a:hover {margin-left: 0px;}
.fa-camera-retro {font-size: 40px; float: left; margin: 5px 5px 0px 0px;} 
.fa-cog {font-size: 40px; float: left; margin: 5px 5px 0px 0px;} 
.fa-vk {font-size: 40px; float: left; margin: 5px 5px 0px 0px;} 
.fa-envelope-o {font-size: 40px; float: left; margin: 5px 5px 0px 0px;} 
.fa-rss {font-size: 40px; float: left; margin: 5px 5px 0px 0px;}
.fa-camera-retro:hover {color:#00FF93;}
.fa-cog:hover {color: red;} 
.fa-vk:hover {color: #004BFF;}
.fa-envelope-o:hover {color: #DBD449;}
.fa-rss:hover {color: #FF9000;}

Если вы следовали инструкции, то у вас должен был получиться вот такой блок социальных кнопок

Если возникли вопросы, можете написать в комментариях.