<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> <style> body{background:url(http://bootstraptema.ru/images/bg/bg-2.png)} .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } .social-navigation ul { margin: 0; padding: 0; text-align: right; } .social-navigation li { position: relative; display: inline-block; list-style: none; line-height: 1; } .menu-social-container { overflow: hidden; } .social-navigation li a { text-decoration: none; display: block; padding: 10px; color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s; } .social-navigation li a::before { font-family: FontAwesome; font-size: 20px; display: block; } .social-navigation li a:hover { color: #23B6B6; } .social-navigation li a[href*="vk.com"]::before { content: '\f189'; } .social-navigation li a[href*="twitter.com"]::before { content: '\f099'; } .social-navigation li a[href*="facebook.com"]::before { content: '\f09a'; } .social-navigation li a[href*="plus.google.com"]::before { content: '\f0d5'; } .social-navigation li a[href*="dribbble.com"]::before { content: '\f17d'; } .social-navigation li a[href*="pinterest.com"]::before { content: '\f0d2'; } .social-navigation li a[href*="youtube.com"]::before { content: '\f167'; } .social-navigation li a[href*="flickr.com"]::before { content: '\f16e'; } .social-navigation li a[href*="vimeo.com"]::before { content: '\f194'; } .social-navigation li a[href*="instagram.com"]::before { content: '\f16d'; } .social-navigation li a[href*="linkedin.com"]::before { content: '\f0e1'; } .social-navigation li a[href*="foursquare.com"]::before { content: '\f180'; } .social-navigation li a[href*="tumblr.com"]::before { content: '\f173'; } </style> <div class="container"> <nav class="social-navigation clearfix"> <div class="menu-social-menu-container"> <ul id="menu-social-menu" class="clearfix"> <li class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://vk.com"><span class="screen-reader-text">ВКонтакте</span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://facebook.com"><span class="screen-reader-text">Facebook</span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://twitter.com"><span class="screen-reader-text">Twitter</span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://linkedin.com"><span class="screen-reader-text">Linkedin</span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://instagram.com"><span class="screen-reader-text">Instagram</span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://pinterest.com"><span class="screen-reader-text">Pinterest</span></a></li> </ul> </div> </nav> </div>