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

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

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

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

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

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

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

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

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

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

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

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

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