Блог TemplateMonster

Как добавить иконки соцсетей на сайт

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

Как можно добавить иконки на ваш сайт

Есть несколько способов добавить иконки социальных сетей на ваш сайт:
  • Добавьте иконки в виде изображений в нужном формате .png, .svg или .eps.
  • Добавьте их, используя иконки шрифтов — FontAwesome, Glyphicons и т. д.
  • Реализуйте иконки, используя виджет WP.
  • Добавьте иконки социальных сетей через плагин WP.
Вы можете выбрать наиболее подходящий для вас или попробовать их все.

Добавление иконок соцсетей как изображений (PNG, SVG, EPS, ETC.)

Если вы дизайнер, вы можете создавать или настраивать иконки самостоятельно. Но если вы не хотите этого делать или просто хотите сэкономить время, вы можете использовать множество сервисов, где можно выбрать пакеты иконок и скачать их.
Наиболее популярными являются:
Vecteezy

Выберите набор иконок, который больше всего соответствует вашим требованиям, и загрузите его. Затем загрузите файлы в медиатеку и добавьте их следующим образом (для HTML сайтов):
<ul class="social-icons">
    <li><a href="http://www.facebook.com"><img src='path_to_your_image' /></a></li>
    <li><a href="http://www.twitter.com"><img src='path_to_your_image' /></a></li>
    <li><a href="http://www.youtube.com"><img src='path_to_your_image' /></a></li>
</ul>
И добавьте стиль, чтобы настроить размер и положение иконок:
.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

Flaticon

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

IconFinder

Вы также можете найти множество бесплатных иконок для соцсетей. Просто найдите стиль, который вам больше по вкусу, добавьте его в свой блок и наслаждайтесь ростом популярности в социальных сетях! Также, есть способ применить социальные иконки в качестве изображений SVG. Просто посмотрите на следующие примеры, чтобы увидеть, как их можно настроить:

See the Pen
SMicons6
by Annie (@Ulalum)
on CodePen.


ДОБАВЛЕНИЕ ИКОНОК СОЦСЕТЕЙ, ИСПОЛЬЗУЯ ИКОНКИ ШРИФТОВ

FontAwesome
FontAwesome, пожалуй, самый популярный значок шрифта в настоящее время. Это супер легко реализовать и использовать. Давайте посмотрим на пример.
1.Добавьте этот код в ваш HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
   <a target="_blank" href="your_url_here"><i class="fa fa-3x fa-google-plus"></i></a>
   <a target="_blank" href="your_url_here"><i class="fa fa-3x fa-facebook-square"></i></a>
   <a target="_blank" href="your_url_here"><i class="fa fa-3x fa-twitter-square"></i>
</div></a>

2.Добавьте стили в свой файл style.css (вы можете добавить свои или использовать этот пример):

body {
  text-align: center;
}
.wrapper {
  display: inline-flex;
  justify-content: center;
}
.wrapper i {
  padding: 10px;
  text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
  transition: all ease-in-out 150ms;
}
.wrapper a:nth-child(1) {
  color: #dd4b39;
}
.wrapper a:nth-child(2) {
  color: #4867AA;
}
.wrapper a:nth-child(3) {
  color: #1DA1F2;
}
.wrapper i:hover {
  margin-top: -3px;
  text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
}

3.И вот как это работает:

See the Pen
SMIcons7
by Helen (@CF-251)
on CodePen.

Кстати, вы можете найти все другие значки в чит-листе от FontAwesome.
Примеры реализации:

See the Pen
SMIcons1
by Helen (@CF-251)
on CodePen.

See the Pen
SMIcons2
by Helen (@CF-251)
on CodePen.


Socicon

Другой способ - использовать иконку шрифта Socicon.

1.Зайдите на сайт:

2.Выберите иконки, которые вам нужны и добавьте HTML код, как показано в примере:

<link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?rd5re8">    
<ul class="socicons-list">
    <li>
      <a href='your_url_here' target='_blank'><span class="socicon-facebook"></span></a> 
    </li>
      <li>
      <a href='your_url_here' target='_blank'><span class="socicon-instagram"></span></a> 
    </li> 
    <li>
      <a href='your_url_here' target='_blank'><span class="socicon-twitter"></span></a> 
    </li>
    <li>
      <a href='your_url_here' target='_blank'><span class="socicon-googleplus"></span></a> 
    </li>   
    <li>
      <a href='your_url_here' target='_blank'><span class="socicon-behance"></span></a> 
    </li>   
</ul>

3.И примените стили, например, такие как эти:

.socicons-list {
 list-style: none;
 display: flex;
 justify-content: center;
}
.socicons-list li {
 margin: 30px 10px;
}
.socicons-list li a {
 text-decoration: none;
 padding: 30px;
 font-size: 30px;
 border-radius: 50%;
 color: #fff;
 background-color: #f1f1f1;
 transition: all ease-in-out 150ms;
}
.socicons-list li a:hover {
 text-shadow: 0 5px 10px #212121;
}
.socicons-list li:nth-child(1) a {
 background-color: #3e5b98;
}
.socicons-list li:nth-child(2) a {
 background-color: #c13584;
}
.socicons-list li:nth-child(3) a {
 background-color: #4da7de;
}
.socicons-list li:nth-child(4) a {
 background-color: #dd4b39;
}
.socicons-list li:nth-child(5) a {
 background-color: #1769ff;
}
4.Нажмите на демо, чтобы увидеть его в действии:

See the Pen
SMIcons4
by Helen (@CF-251)
on CodePen.


РЕАЛИЗАЦИЯ ИКОНОК СОЦСЕТЕЙ С ПОМОЩЬЮ WP ВИДЖЕТА

Если ваш сайт создан на WordPress, есть отличный способ добавить блок с иконками соцсетей, используя WordPress виджет.
Короче говоря, просто посмотрите этот урок:

https://www.youtube.com/watch?v=oVGFEzeC8dY


ДОБАВЛЕНИЕ ИКОНОК СОЦСЕТЕЙ ЧЕРЕЗ WP ПЛАГИН

Здесь вы можете просмотреть различные плагины, которые могут быть полезны при добавлении учетных записей социальных сетей на вашу страницу — Плагины WordPress для добавления иконок социальных сетей. Обратите внимание на Flying Icons | Плагин Floating Social Media Icon от Accurax, инструмент, который сэкономит много времени при добавлении иконок на ваш сайт:

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


Как монетизировать свои умения?

Теперь вы знаете, как добавлять иконки соцсетей на сайт. Эти навыки можно и нужно монетизировать: ищите заказчиков, которым нужны такие услуги. Я составила список площадок, где можно найти клиентов на веб-разработку и веб-дизайн.

Тендерные площадки

Советуем обратить внимание на специализированные площадки в сфере digital — там и регистрация простая, и бюрократии нет. Самая популярная такая площадка в Рунете — Workspace. Здесь клиенты организуют тендеры на digital-услуги, а агентства и веб-студии откликаются и участвуют в конкурсе. Неплохой способ получить достойный хорошо оплачиваемый заказ.

Биржи фриланса

Есть универсальные площадки для всех видов digital-услуг:

Есть специальные биржи для программистов и веб-дизайнеров: например, Upwork.

Соцсети, Telegram

Как и в случае с биржами, есть общие группы и каналы для поиска работы на удаленке:

И профессиональные сообщества программистов и веб-дизайнеров.

Собственный блог

Свой проект можно вести везде: на своем сайте, на Хабре, Medium, YouTube и других ресурсах. Можно также писать гостевые статьи для СМИ и IT-блогов (хоть за деньги, хоть за пиар — давать ссылку на портфолио и сайт, например). Главное — чтобы контент был полезен потенциальным заказчикам, чтобы они стали к вам лояльными и обратились за оказанием услуг.