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

<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;
}

<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>

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.

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

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;
}

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

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

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

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

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

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

• Kwork,
• Weblancer
• биржа Workspace.

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

Соцсети, Telegram

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

• Дистанция. Фриланс, удаленная работа
• Удаленная работа: вакансии и фриланс
• ФРИЛАНС ВАКАНСИИ | УДАЛЕННАЯ РАБОТА

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

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

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