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

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

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

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

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

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

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

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

Для этого на сайте 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;}

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

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

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

 

 

 

[Всего голосов: 2    Средний: 5/5]

Комментарии:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2017 Онлайн журнал - Blognovichok.ru· Авторские права защищены.
Все материалы опубликованные на сайте являются объектами авторского права. Использование материалов разрешается только с активной ссылкой на blognovichok.ru