Very efficient

Thank you!
I like very much things kept as simple as possible.
Of course I had to disable Font Awesome at all, instead prepared SVG sprite (as background image).
Twitter, Facebook, Pinterest, Linkedin, Email, Reddit, WhatsApp, Pocket, without Google+, of course.
Here’s my CSS (which I prepend to the main stylesheet). Feel free to use it.

/* Scriptless Social Sharing */

.scriptlesssocialsharing-buttons {
	display: flex;
}
.scriptlesssocialsharing-buttons .button {
	flex: 1;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-weight: normal;
	line-height: 1;
	padding: .7em 0;
	border: none;
	border-radius: 0;
	white-space: nowrap;
	overflow: hidden;
}
.scriptlesssocialsharing-buttons .button::before {
	content: '';
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	vertical-align: middle;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='800' height='100' fill-rule='evenodd' viewBox='0 0 8000 1000'%3E%3Cg fill='%23fff'%3E%3Cpath id='email' d='M802 351v350H198V351l302 247 302-247zm-604-52h604L500 545 198 299z'/%3E%3Cpath id='twitter' d='M1363 808c245 0 439-204 430-448 8-7 62-50 75-77-20 8-58 20-86 22 4-3 58-40 66-84-32 17-65 28-96 38-27-30-66-48-110-48-98 0-169 91-147 185-12-1-189-11-310-157 0 0-72 99 43 200 0 0-35-1-65-19 0 0-11 119 119 150 0 0-26 9-67 2 0 0 23 97 139 106 0 0-91 83-222 63 13 8 100 67 231 67z'/%3E%3Cpath id='facebook' d='M2558 873h-135V543h-111V409h111V296c0-82 67-149 149-149h116v121h-83c-26 0-47 21-47 47v94h128l-18 134h-110v330z'/%3E%3Cpath id='pinterest' d='M3468 633c-19 99-42 194-111 244-21-150 31-263 56-382-42-70 4-209 91-175 108 42-92 258 42 285 140 28 197-243 110-331-125-127-365-3-335 179 7 45 53 59 18 120-80-18-104-81-101-165 5-139 124-235 244-249 151-17 293 56 312 198 22 160-68 334-230 322-43-4-62-25-96-46z'/%3E%3Cpath id='linkedin' d='M4818 531v222h-129V546c0-52-19-88-65-88s-70 37-70 79v216h-129V366h129v55c17-27 47-64 116-64 84 0 148 55 148 174zm-527-352c-98 0-97 134-1 134 97 0 96-134 1-134zm-66 574h129V366h-129v387z'/%3E%3Cpath id='whatsapp' d='M5670 554l-62-17c-8-3-17 0-23 6-11 11-22 27-40 20-29-12-91-66-106-94-10-16 5-30 15-42 5-7 6-16 2-23l-26-59c-6-15-24-19-36-9-17 15-38 37-40 62-4 43 14 98 85 164 81 76 146 86 189 75 24-5 43-29 55-48 8-13 2-30-13-35zm-171-389c-170 9-305 150-304 321 0 52 12 101 34 144l-34 165c-1 9 7 17 16 15l161-38c42 20 88 32 138 33 174 3 319-136 324-310 6-186-148-338-335-330zm193 497c-77 77-193 95-289 47l-22-11-100 24 21-101-11-22c-49-96-31-214 46-291 98-98 257-98 355 0s97 257 0 354z'/%3E%3Cpath id='reddit' d='M6828 410c-30-30-78-30-108-1-52-38-124-62-205-65l35-165 114 25c2 38 41 62 76 48 36-15 45-62 17-90-26-26-71-19-87 15l-128-27c-7-2-14 3-16 10 0 0-38 183-38 184-82 2-155 26-209 65-29-29-77-29-107 1-37 37-26 102 23 124-6 37 3 74 22 106 56 92 181 130 283 130 101 0 227-38 282-130 20-32 28-69 23-106 49-22 61-86 23-124zm-198 253c13-13-7-33-20-20-24 24-74 32-110 32s-86-8-110-32c-13-13-33 7-20 20 37 37 109 40 130 40s92-3 130-40zm11-94c36-15 45-62 18-89-34-34-94-10-94 39 0 39 41 65 76 50zm-316-50c0 39 40 65 76 50 35-15 45-62 17-89-34-34-93-10-93 39z'/%3E%3Cpath id='pocket' d='M7732 261h-463c-30 0-54 23-54 53v171c0 155 128 283 286 283 156 0 283-127 284-283V313c0-29-23-52-53-52zm-260 339l-134-127c-15-15-15-42 0-56s40-16 55 0l107 103 107-103c15-16 40-14 55 0s15 41 0 56l-134 127c-15 15-41 15-56 0z'/%3E%3C/g%3E%3C/svg%3E"); /* SVG sprite */
	background-size: 800% 100%;
}
.scriptlesssocialsharing .button.email     {background-color: #808080}
.scriptlesssocialsharing .button.twitter   {background-color: #00ACED}
.scriptlesssocialsharing .button.facebook  {background-color: #3B5998}
.scriptlesssocialsharing .button.pinterest {background-color: #CB2027}
.scriptlesssocialsharing .button.linkedin  {background-color: #0077B5}
.scriptlesssocialsharing .button.whatsapp  {background-color: #1EBEA5}
.scriptlesssocialsharing .button.reddit    {background-color: #FF4500}
.scriptlesssocialsharing .button.pocket    {background-color: #EF4056}

.button.twitter::before   {background-position:-100%}
.button.facebook::before  {background-position:-200%}
.button.pinterest::before {background-position:-300%}
.button.linkedin::before  {background-position:-400%}
.button.whatsapp::before  {background-position:-500%}
.button.reddit::before    {background-position:-600%}
.button.pocket::before    {background-position:-700%}

.scriptlesssocialsharing .button:hover::before, .scriptlesssocialsharing .button:focus::before {
	animation: sss .3s;
}
@keyframes sss {
	from {
		background-position-y:-1.5em;
	}
	to {
		background-position-y:0;
	}
}
.scriptlesssocialsharing-buttons .sss-name {
	margin-left: 4%;
	font-size: 0.7em;
}
/* no text in buttons on tablet and smaller screens */
@media (max-width:1024px) {
	.scriptlesssocialsharing-buttons .sss-name {
		position: absolute;
		clip: rect(1px,1px,1px,1px);
		height: 1px;
		width: 1px;
		border: 0;
		overflow: hidden
	}
}
/* fixed position on mobiles */
@media (max-width:480px) {
	.scriptlesssocialsharing {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		padding: 0;
		margin: 0 !important;
		z-index: 9999;
	}
	.scriptlesssocialsharing__heading {
		display: none;
	}
	.scriptlesssocialsharing-buttons {
		padding: 0;
		margin: 0;
	}
	.scriptlesssocialsharing-buttons .button {
		padding: .4em 0;
	}
}
@media print {
	.scriptlesssocialsharing {
		display: none
	}
}

• This topic was modified 5 years, 10 months ago by Rafa?.