Оформление ссылок на социальные сети

Установка ссылок "поделиться" в соц. сетях
Примеры оформления
Цвета социальных сетей
Использование кнопок для пагинации страниц

Установка ссылок "поделиться" в соц. сетях:

ВКонтакте

<a href="#vk" onclick="window.open('https://vk.com/share.php?url='+ window.location.href +'')">ВКонтакте</a>

1	<a href="#vk" onclick="window.open('https://vk.com/share.php?url='+ window.location.href +'')">ВКонтакте</a>

Одноклассники

<a href="#ok" onclick="window.open('https://connect.ok.ru/offer?url='+ window.location.href +'')">Одноклассники</a>

1	<a href="#ok" onclick="window.open('https://connect.ok.ru/offer?url='+ window.location.href +'')">Одноклассники</a>

Twitter

<a href="#twitter" onclick="window.open('https://twitter.com/intent/tweet?url='+ window.location.href +'')">Twitter</a>

1	<a href="#twitter" onclick="window.open('https://twitter.com/intent/tweet?url='+ window.location.href +'')">Twitter</a>

Примеры оформления:

Все варианты используют шрифт FontAwesome, но могут использовать и графические иконки (последняя ссылка со смайликом).

Вариант 1

<ul class="social-icons-1">
	<li><a href="#"><i class="fa fa-vk"></i></a></li>
	<li><a href="#"><i class="fa fa-odnoklassniki"></i></a></li>
	<li><a href="#"><i class="fa fa-telegram"></i></a></li>
	<li><a href="#"><i class="fa fa-twitter"></i></a></li>
	<li><a href="#"><img src="smile.png" alt=""/></a></li>
</ul>

</ul>

.social-icons-1 {
	padding: 0;
	list-style: none;
	margin: 10px;
}
.social-icons-1 li {
	display: inline-block;
	position: relative;
	font-size: 24px;
}
.social-icons-1 i,
.social-icons-1 img {
	color: #fff;
	position: absolute;
	top: 18px;
	left: 18px;
	width: 24px;
	height: 24px;
	text-align:center;
	transition: all 0.3s ease-out;
}
.social-icons-1 a {
	display: inline-block;
}
.social-icons-1 a:before {
	transform: scale(1);
	content: "";
	width: 60px;
	height: 60px;
	border-radius: 100%;
	display: block;
	background: linear-gradient(45deg, #337AB7, #2d6b9f);
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2);
	transition: all 0.3s ease-out;
}
.social-icons-1 a:hover:before {
	transform: scale(0);
	transition: all 0.3s ease-in;
}
.social-icons-1 a:hover i,
.social-icons-1 a:hover img {
	transform: scale(1.8);
	color: #337AB7;
	transition: all 0.3s ease-in;
}

.social-icons-1 {

padding: 0;

list-style: none;

margin: 10px;

}

.social-icons-1 li {

display: inline-block;

position: relative;

font-size: 24px;

}

.social-icons-1 i,

.social-icons-1 img {

color: #fff;

position: absolute;

top: 18px;

left: 18px;

width: 24px;

height: 24px;

text-align:center;

transition: all 0.3s ease-out;

}

.social-icons-1 a {

display: inline-block;

}

.social-icons-1 a:before {

transform: scale(1);

content: "";

width: 60px;

height: 60px;

border-radius: 100%;

display: block;

background: linear-gradient(45deg, #337AB7, #2d6b9f);

box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2);

transition: all 0.3s ease-out;

}

.social-icons-1 a:hover:before {

transform: scale(0);

transition: all 0.3s ease-in;

}

.social-icons-1 a:hover i,

.social-icons-1 a:hover img {

transform: scale(1.8);

color: #337AB7;

transition: all 0.3s ease-in;

}

Вариант 2

<ul class="social-icons-2">
	<li><a href="#"><i class="fa fa-vk"></i></a></li>
	<li><a href="#"><i class="fa fa-odnoklassniki"></i></a></li>
	<li><a href="#"><i class="fa fa-telegram"></i></a></li>
	<li><a href="#"><i class="fa fa-twitter"></i></a></li>
	<li><a href="#"><i><img src="smile.png" alt=""/></i></a></li>
</ul>

</ul>

.social-icons-2 {
    padding: 0;
    list-style: none;
    margin: 10px;
}
.social-icons-2 li {
	display: inline-block;
	position: relative;
}
.social-icons-2 li a {
	width: 60px;
	height: 60px;
	display: inline-block;
	text-align: center;
	margin: 0 4px;
	border-radius: 50%;
	padding: 6px;
	box-sizing: border-box;
	text-decoration:none;
	box-shadow: 0 8px 12px rgba(0,0,0,0.3);
	background: linear-gradient(0deg, #ddd, #fff);
	transition: .5s;
}
.social-icons-2 li a:hover {
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	color: #000;
}
.social-icons-2 li a i {
	display: block;
	background: linear-gradient(0deg, #fff, #ddd);
	border-radius: 50%;
	padding: 12px;
	font-size: 24px;
	color: #969696;
	transition: .5s;
	width: 24px;
	height: 24px;
	position: absolute;
	box-sizing: content-box;
}
.social-icons-2 li a:hover i {
	color: #337AB7;
}
.social-icons-2 li a img {
	width: 24px;
	height: 24px;
}

.social-icons-2 {

padding: 0;

list-style: none;

margin: 10px;

}

.social-icons-2 li {

display: inline-block;

position: relative;

}

.social-icons-2 li a {

width: 60px;

height: 60px;

display: inline-block;

text-align: center;

margin: 0 4px;

border-radius: 50%;

padding: 6px;

box-sizing: border-box;

text-decoration:none;

box-shadow: 0 8px 12px rgba(0,0,0,0.3);

background: linear-gradient(0deg, #ddd, #fff);

transition: .5s;

}

.social-icons-2 li a:hover {

box-shadow: 0 2px 5px rgba(0,0,0,0.3);

color: #000;

}

.social-icons-2 li a i {

display: block;

background: linear-gradient(0deg, #fff, #ddd);

border-radius: 50%;

padding: 12px;

font-size: 24px;

color: #969696;

transition: .5s;

width: 24px;

height: 24px;

position: absolute;

box-sizing: content-box;

}

.social-icons-2 li a:hover i {

color: #337AB7;

}

.social-icons-2 li a img {

width: 24px;

height: 24px;

}

Вариант 3

<ul class="social-icons-3">
	<li><a href="#"><i class="fa fa-vk"></i></a></li>
	<li><a href="#"><i class="fa fa-odnoklassniki"></i></a></li>
	<li><a href="#"><i class="fa fa-telegram"></i></a></li>
	<li><a href="#"><i class="fa fa-twitter"></i></a></li>
	<li><a href="#"><img src="smile.png" alt=""/></a></li>
</ul>

</ul>

.social-icons-3 {
    padding: 0;
    list-style: none;
    margin: 10px;
	display: flex;
	justify-content: center;
}
.social-icons-3 a i {
	font-size: 32px;
	line-height: 64px;
	transition: 0.3s;
}
.social-icons-3 a img {
	width: 32px;
	height: 32px;
	margin-top: 16px;
}
.social-icons-3 a {
	text-decoration:none;
	position: relative;
	display: block;
	width: 64px;
	height: 64px;
	background: #BFE2FF;
	text-align: center;
	margin: 0 8px;
	box-shadow: 10px 0 10px rgba(0, 0, 0, 0.3);
	transition: 0.3s;
	color: #337AB7;
}
.social-icons-3 a::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 3px;
	background: rgba(51, 122, 183, 0.3);
	height: 10%;
	width: 100%;
	transform: skewX(-45deg);
	transition: 0.3s;
}
.social-icons-3 a::after {
	content: "";
	position: absolute;
	top: -3px;
	left: 64px;
	background: rgba(51, 122, 183, 0.6);
	height: 100%;
	width: 10%;
	transform: skewY(-45deg);
	transition: 0.3s;
}
.social-icons-3 a:hover {
	transform: translate(-5%, 5%);
	box-shadow: 6px 4px 20px rgba(0, 0, 0, 0.5);
}
.social-icons-3 a:hover {
	background: #337AB7;
}
.social-icons-3 a:hover i {
	color: #fff;
}
.social-icons-3 a:hover::after {
	background: #184e7c;
}
.social-icons-3 a:hover::before {
	background: #2a70aa;
}

.social-icons-3 {

padding: 0;

list-style: none;

margin: 10px;

display: flex;

justify-content: center;

}

.social-icons-3 a i {

font-size: 32px;

line-height: 64px;

transition: 0.3s;

}

.social-icons-3 a img {

width: 32px;

height: 32px;

margin-top: 16px;

}

.social-icons-3 a {

text-decoration:none;

position: relative;

display: block;

width: 64px;

height: 64px;

background: #BFE2FF;

text-align: center;

margin: 0 8px;

box-shadow: 10px 0 10px rgba(0, 0, 0, 0.3);

transition: 0.3s;

color: #337AB7;

}

.social-icons-3 a::before {

content: "";

position: absolute;

top: -6px;

left: 3px;

background: rgba(51, 122, 183, 0.3);

height: 10%;

width: 100%;

transform: skewX(-45deg);

transition: 0.3s;

}

.social-icons-3 a::after {

content: "";

position: absolute;

top: -3px;

left: 64px;

background: rgba(51, 122, 183, 0.6);

height: 100%;

width: 10%;

transform: skewY(-45deg);

transition: 0.3s;

}

.social-icons-3 a:hover {

transform: translate(-5%, 5%);

box-shadow: 6px 4px 20px rgba(0, 0, 0, 0.5);

}

.social-icons-3 a:hover {

background: #337AB7;

}

.social-icons-3 a:hover i {

color: #fff;

}

.social-icons-3 a:hover::after {

background: #184e7c;

}

.social-icons-3 a:hover::before {

background: #2a70aa;

}

Вариант 4

<ul class="social-icons-4">
	<li><a href="#"><i class="fa fa-vk"></i></a></li>
	<li><a href="#"><i class="fa fa-odnoklassniki"></i></a></li>
	<li><a href="#"><i class="fa fa-telegram"></i></a></li>
	<li><a href="#"><i class="fa fa-twitter"></i></a></li>
	<li><a href="#"><img src="smile.png" alt=""/></a></li>
</ul>

</ul>

.social-icons-4 {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 10px;
}
.social-icons-4 a {
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 100%;
	background: #efefef;
	position: relative;
	margin: 5px;
	text-align: center;
	box-shadow: 0 2px 6px #c1c1c1;
	font-size: 32px;
	color: #337AB7;
	transition: 0.5s;
}
.social-icons-4 a img {
	width: 32px;
	height: 32px;
	margin-top: 14px;
}
.social-icons-4 a i,
.social-icons-4 a img {
	z-index:2;
	position: relative;
	line-height: 60px;
}
.social-icons-4 a:hover {
	color: #fff;
}
.social-icons-4 a:after {
	content: '';
	display: block;
	position: absolute;
	background: #BFE2FF;
	border-radius: 100%;
	width: 0;
	height: 0;
	transition: 0.3s;
	top: 0;
	left: 50%;
}
.social-icons-4 a:hover:after {
	width: 60px;
	height: 60px;
	margin-left: -30px;
	background: #337AB7;
}

.social-icons-4 {

display: flex;

justify-content: center;

flex-wrap: wrap;

list-style: none;

margin: 10px;

}

.social-icons-4 a {

display: inline-block;

width: 60px;

height: 60px;

border-radius: 100%;

background: #efefef;

position: relative;

margin: 5px;

text-align: center;

box-shadow: 0 2px 6px #c1c1c1;

font-size: 32px;

color: #337AB7;

transition: 0.5s;

}

.social-icons-4 a img {

width: 32px;

height: 32px;

margin-top: 14px;

}

.social-icons-4 a i,

.social-icons-4 a img {

z-index:2;

position: relative;

line-height: 60px;

}

.social-icons-4 a:hover {

color: #fff;

}

.social-icons-4 a:after {

content: '';

display: block;

position: absolute;

background: #BFE2FF;

border-radius: 100%;

width: 0;

height: 0;

transition: 0.3s;

top: 0;

left: 50%;

}

.social-icons-4 a:hover:after {

width: 60px;

height: 60px;

margin-left: -30px;

background: #337AB7;

}

Вариант 5

<ul class="social-icons-5">
	<li><a href="#"><i class="fa fa-vk"></i></a></li>
	<li><a href="#"><i class="fa fa-odnoklassniki"></i></a></li>
	<li><a href="#"><i class="fa fa-telegram"></i></a></li>
	<li><a href="#"><i class="fa fa-twitter"></i></a></li>
	<li><a href="#"><img src="smile.png" alt=""/></a></li>
</ul>

</ul>

.social-icons-5 {
	list-style: none;
    margin: 10px;
	padding: 0;
	display: flex;
	justify-content: center;	  
}
.social-icons-5 a {
	text-decoration: none;
	color: #fff;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	margin: 0 6px;
	font-size: 26px;
	background: #337AB7;
	transition: border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;
	transition: transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;
	transition: transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;
}
.social-icons-5 a img {
	width: 26px;
	height: 26px;
}
.social-icons-5 a i,
.social-icons-5 a img {
	transition: transform 0.4s linear 0s;
}
.social-icons-5 a:hover {
	transform: rotate(360deg);
	border-radius: 50%;
}
.social-icons-5 a:hover i,
.social-icons-5 a:hover img {
	transform: rotate(-360deg);
}

.social-icons-5 {

list-style: none;

margin: 10px;

padding: 0;

display: flex;

justify-content: center;

}

.social-icons-5 a {

text-decoration: none;

color: #fff;

width: 60px;

height: 60px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 10px;

margin: 0 6px;

font-size: 26px;

background: #337AB7;

transition: border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;

transition: transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;

}

.social-icons-5 a img {

width: 26px;

height: 26px;

}

.social-icons-5 a i,

.social-icons-5 a img {

transition: transform 0.4s linear 0s;

}

.social-icons-5 a:hover {

transform: rotate(360deg);

border-radius: 50%;

}

.social-icons-5 a:hover i,

.social-icons-5 a:hover img {

transform: rotate(-360deg);

}

Вариант 6

<ul class="social-icons-6">
	<li><a href="#"><i class="fa fa-vk"></i></a></li>
	<li><a href="#"><i class="fa fa-odnoklassniki"></i></a></li>
	<li><a href="#"><i class="fa fa-telegram"></i></a></li>
	<li><a href="#"><i class="fa fa-twitter"></i></a></li>
	<li><a href="#"><img src="smile.png" alt=""/></a></li>
</ul>

</ul>

.social-icons-6 {
	list-style: none;
    margin: 10px;
	padding: 0;
	display: flex;
	justify-content: center;	  
}
.social-icons-6 a {
	text-decoration: none;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin: 0 6px;
	font-size: 26px;
	overflow: hidden;
	position: relative;
	color: #337AB7;
	border: 2px solid #337AB7;
	transition: all 0.2s linear 0s;
}
.social-icons-6 a:after {
	content: "";
	display: block;
	width: 90%;
	height: 90%;
	top: -110%;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
	background-color: #337AB7;
	border-radius: 50%;
}
.social-icons-6 a i,
.social-icons-6 a img {
	position: relative;
	z-index: 1;
}
.social-icons-6 a img {
	width: 26px;
	height: 26px;
}
.social-icons-6 a:hover {
	color: #fff;
}
.social-icons-6 a:hover:after {
	top: 5%;
	transition: all 0.2s linear 0s;
}

.social-icons-6 {

list-style: none;

margin: 10px;

padding: 0;

display: flex;

justify-content: center;

}

.social-icons-6 a {

text-decoration: none;

width: 60px;

height: 60px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

margin: 0 6px;

font-size: 26px;

overflow: hidden;

position: relative;

color: #337AB7;

border: 2px solid #337AB7;

transition: all 0.2s linear 0s;

}

.social-icons-6 a:after {

content: "";

display: block;

width: 90%;

height: 90%;

top: -110%;

left: 0;

right: 0;

margin: auto;

position: absolute;

background-color: #337AB7;

border-radius: 50%;

}

.social-icons-6 a i,

.social-icons-6 a img {

position: relative;

z-index: 1;

}

.social-icons-6 a img {

width: 26px;

height: 26px;

}

.social-icons-6 a:hover {

color: #fff;

}

.social-icons-6 a:hover:after {

top: 5%;

transition: all 0.2s linear 0s;

}

Вариант 7

<ul class="social-icons-7">
	<li><a href="#"><i class="fa fa-vk"></i></a></li>
	<li><a href="#"><i class="fa fa-odnoklassniki"></i></a></li>
	<li><a href="#"><i class="fa fa-telegram"></i></a></li>
	<li><a href="#"><i class="fa fa-twitter"></i></a></li>
	<li><a href="#"><img src="smile.png" alt=""/></a></li>
</ul>

</ul>

.social-icons-7 {
	list-style: none;
    margin: 10px;
	padding: 0;
	display: flex;
	justify-content: center;	  
}
.social-icons-7 a {
	text-decoration: none;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin: 0 6px;
	font-size: 26px;
	overflow: hidden;
	position: relative;
	color: #337AB7;
	border: 2px solid #337AB7;
	transition: border-radius 0.2s linear 0s;
	transform: rotate(45deg);
}
.social-icons-7 a:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: -100%;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
	background-color: #337AB7;
}
.social-icons-7 a i,
.social-icons-7 a img {
	transition: transform 0.2s linear 0s;
	transform: rotate(-45deg);
    position: relative;
    z-index: 1;		  
}
.social-icons-7 a img {
	width: 26px;
	height: 26px;
}
.social-icons-7 a:hover {
	border-radius: 0px;
	width: 50px;
	height: 50px;
	color: #FFF;
	margin: 5px 11px
}
.social-icons-7 a:hover:after {
	top: 0;
	transition: all 0.2s linear 0s;
}

.social-icons-7 {

list-style: none;

margin: 10px;

padding: 0;

display: flex;

justify-content: center;

}

.social-icons-7 a {

text-decoration: none;

width: 60px;

height: 60px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

margin: 0 6px;

font-size: 26px;

overflow: hidden;

position: relative;

color: #337AB7;

border: 2px solid #337AB7;

transition: border-radius 0.2s linear 0s;

transform: rotate(45deg);

}

.social-icons-7 a:after {

content: "";

display: block;

width: 100%;

height: 100%;

top: -100%;

left: 0;

right: 0;

margin: auto;

position: absolute;

background-color: #337AB7;

}

.social-icons-7 a i,

.social-icons-7 a img {

transition: transform 0.2s linear 0s;

transform: rotate(-45deg);

position: relative;

z-index: 1;

}

.social-icons-7 a img {

width: 26px;

height: 26px;

}

.social-icons-7 a:hover {

border-radius: 0px;

width: 50px;

height: 50px;

color: #FFF;

margin: 5px 11px

}

.social-icons-7 a:hover:after {

top: 0;

transition: all 0.2s linear 0s;

}

Вариант 8

<ul class="social-icons-8">
	<li><a href="#"><i class="fa fa-vk"></i></a></li>
	<li><a href="#"><i class="fa fa-odnoklassniki"></i></a></li>
	<li><a href="#"><i class="fa fa-telegram"></i></a></li>
	<li><a href="#"><i class="fa fa-twitter"></i></a></li>
	<li><a href="#"><img src="smile.png" alt=""/></a></li>
</ul>

</ul>

.social-icons-8 {
    padding: 0;
    list-style: none;
    margin: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.social-icons-8 li {
    padding: 0 10px;
}
.social-icons-8 i {
	color: #337AB7;
	font-size: 48px;
}
.social-icons-8 img {
	width: 48px;
	height: 48px;
}
.social-icons-8 i:hover,
.social-icons-8 img:hover {
	animation: social-icons-8-move 200ms infinite;
}
@keyframes social-icons-8-move {
	0% {
		filter: drop-shadow(6px 6px #BFE2FF) drop-shadow(-6px -6px #d1eaff);
	}
	25% {
		filter: drop-shadow(-6px -6px #BFE2FF) drop-shadow(6px 6px #d1eaff);
	}
	50% {
		filter: drop-shadow(6px -6px #BFE2FF) drop-shadow(-6px 6px #d1eaff);
	}
	75% {
		filter: drop-shadow(-6px -6px #BFE2FF) drop-shadow(-6px -6px #d1eaff);
	}
	100% {
		filter: drop-shadow(6px 6px #BFE2FF) drop-shadow(6px 6px #d1eaff);
	}
}

.social-icons-8 {

padding: 0;

list-style: none;

margin: 10px;

display: flex;

justify-content: center;

align-items: center;

}

.social-icons-8 li {

padding: 0 10px;

}

.social-icons-8 i {

color: #337AB7;

font-size: 48px;

}

.social-icons-8 img {

width: 48px;

height: 48px;

}

.social-icons-8 i:hover,

.social-icons-8 img:hover {

animation: social-icons-8-move 200ms infinite;

}

@keyframes social-icons-8-move {

0% {

filter: drop-shadow(6px 6px #BFE2FF) drop-shadow(-6px -6px #d1eaff);

}

25% {

filter: drop-shadow(-6px -6px #BFE2FF) drop-shadow(6px 6px #d1eaff);

}

50% {

filter: drop-shadow(6px -6px #BFE2FF) drop-shadow(-6px 6px #d1eaff);

}

75% {

filter: drop-shadow(-6px -6px #BFE2FF) drop-shadow(-6px -6px #d1eaff);

}

100% {

filter: drop-shadow(6px 6px #BFE2FF) drop-shadow(6px 6px #d1eaff);

}

Цвета социальных сетей:

Я не стал расскрашивать ни кнопки, ни логотипы соц. сетей в их фирменные цвета, т.к. наличие тех или иных сугубо индивидуально, как и само желание красить под них, а не под цвета сайта.

Ниже представлены основные социальные сети и их цвета.

ВКонтакте

Hex: #45668e

RGB: 69, 102, 142

Одноклассники

Hex: #F2720C

RGB: 25, 81, 95

YouTube

Hex: #bb0000

RGB: 187, 0, 0

Twitter

Hex: #00aced

RGB: 0, 172, 237

Hex: #2CA5E0

RGB: 44, 165, 224

Vimeo

Hex: #aad450

RGB: 170, 212, 80

Использование кнопок для пагинации страниц:

Все данные примеры отлично подойдут не только для оформления ссылок на соц. сети, но и для пагинации страниц на сайте

Для этого нужно добавить стиль (например, для варианта 6):

.social-icons-6 i {
	font-style: normal;
	font-weight: bold;
}

.social-icons-6 i {

font-style: normal;

font-weight: bold;

}

А HTML должен выглядеть следующим образом:

<ul class="social-icons-6">
	<li><a href="#"><i>1</i></a></li>
	<li><a href="#"><i>2</i></a></li>
	<li><a href="#"><i>...</i></a></li>
	<li><a href="#"><i>9</i></a></li>
	<li><a href="#"><i>10</i></a></li>
</ul>

</ul>

В итоге получим:

Михаил: 17.09.2023 в 14:24

Здравствуйте, а можно узнать наполнение классов fa, fa-vk, fa-telegram и какие иконки были использованы?

Ответить
- Alexander: 19.09.2023 в 13:32
  
  Это старый fontAwesome
  
  Ответить
alex: 26.03.2023 в 02:13

ссылки поделиться как добавить в html не понял?

Ответить
- Alexander: 03.04.2023 в 08:55
  
  Три есть в примере, остальные можно нагуглить и сделать по аналогии.
  
  Ответить
Илья: 02.04.2020 в 04:10

Не совсем понимаю, как это установить на CMS WordPress, можете подсказать? Ссылки выводятся, а иконки не отображаются. В какие файлы вносить все коды?

Ответить
- Alexander: 03.04.2020 в 08:35
  
  Чтобы показывались иконки нужен шрифт FontAwesome или другой.
  Или найти нужную картинку и вставить ее.
  
  Ответить
Рустам: 14.01.2019 в 16:16

Привет!
Спасибо за очередное интересное решение!
Выбрал Вариант 7. У меня только одна проблемка возникла. При наведении, цвет иконки не меняется на белый.

Ответить
- Alexander: 15.01.2019 в 02:41
  
  У вас Font Awesome иконки?
  Если они шрифтом, то попробуйте тут добавить !important
  .social-icons-7 a:hover { border-radius: 0px; width: 50px; height: 50px; color: #FFF!important; margin: 5px 11px }
  
  Ответить
  - Артур: 28.11.2019 в 09:51
    
    Как добавить сами иконки ? у меня просто нету иконок и куда их залить.!
    В css добавил - код залил! показывает круглишы и смайл в конце!
    А иконки в корень лить или папку img ?
    
    Ответить

Установка ссылок "поделиться" в соц. сетях:

ВКонтакте

Одноклассники

Twitter

Примеры оформления:

Вариант 1

Вариант 2

Вариант 3

Вариант 4

Вариант 5

Вариант 6

Вариант 7

Вариант 8

Цвета социальных сетей:

ВКонтакте

Hex: #45668e

RGB: 69, 102, 142

Одноклассники

Hex: #F2720C

RGB: 25, 81, 95

YouTube

Hex: #bb0000

RGB: 187, 0, 0

Twitter

Hex: #00aced

RGB: 0, 172, 237

Telegram

Hex: #2CA5E0

RGB: 44, 165, 224

Vimeo

Hex: #aad450

RGB: 170, 212, 80

Использование кнопок для пагинации страниц:

Смотрите также:

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

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