SVG Social Icons

Developer
Kendrick Arnett
Size
4,587 Kb
Views
46,552
  1. SVG Social Icons Previews
  2. SVG Social Icons HTML Codes
  3. SVG Social Icons CSS Codes
  4. SVG Social Icons JS Codes

How do I make an svg social icons?

What is a svg social icons? How do you make a svg social icons? This script and codes were developed by Kendrick Arnett on 11 August 2022, Thursday.

SVG Social Icons Previews
IQ Test

SVG Social Icons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Social Icons</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>SVG Social Icons</h1> <div class="p1-social"> <span class="p1-social-facebook"> <button onclick="p1share('f');return false;" class="p1-social-button"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>facebook</title><path d="M0 0v24h24V0H0zm16 7h-1.923C13.46 7 13 7.252 13 7.89V9h3l-.24 3H13v8h-3v-8H8V9h2V7.077C10 5.055 11.064 4 13.46 4H16v3z" fill="#365899" fill-rule="evenodd"/></svg></button> </span> <span class="p1-social-pinterest"><button onclick="p1share('p');return false;" class="p1-social-button"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>pinterest</title><path d="M0 0v24h24V0H0zm12 20c-.825 0-1.62-.125-2.37-.357.327-.53.814-1.402.995-2.098l.5-1.9c.26.497 1.022.917 1.832.917 2.413 0 4.15-2.22 4.15-4.976 0-2.643-2.156-4.62-4.93-4.62-3.453 0-5.287 2.317-5.287 4.84 0 1.175.625 2.635 1.624 3.1.15.07.232.04.268-.106l.222-.907c.02-.08.01-.15-.056-.23-.33-.4-.595-1.138-.595-1.825 0-1.765 1.336-3.472 3.612-3.472 1.965 0 3.34 1.34 3.34 3.255 0 2.165-1.092 3.664-2.514 3.664-.785 0-1.373-.65-1.184-1.446.226-.95.663-1.977.663-2.664 0-.614-.33-1.127-1.013-1.127-.803 0-1.448.83-1.448 1.943 0 .71.238 1.188.238 1.188s-.793 3.353-.938 3.977c-.16.69-.098 1.662-.028 2.294C6.108 18.283 4 15.39 4 12c0-4.418 3.582-8 8-8s8 3.582 8 8-3.582 8-8 8z" fill="#BD081C" fill-rule="evenodd"/></svg></button> </span> <span class="p1-social-twitter"> <button onclick="p1share('t');return false;" class="p1-social-button"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>twitter</title><path d="M0 0v24h24V0H0zm18.862 9.237c.208 4.617-3.235 9.765-9.33 9.765-1.854 0-3.58-.543-5.032-1.475 1.742.205 3.48-.278 4.86-1.36-1.437-.026-2.65-.975-3.066-2.28.515.1 1.02.07 1.482-.055-1.58-.317-2.668-1.74-2.633-3.26.442.246.95.394 1.486.41-1.462-.976-1.876-2.906-1.017-4.382 1.62 1.986 4.038 3.293 6.766 3.43C11.9 7.977 13.457 6 15.576 6c.944 0 1.797.398 2.396 1.037.748-.147 1.45-.42 2.085-.796-.245.768-.766 1.41-1.443 1.817.664-.08 1.297-.256 1.885-.517-.44.656-.997 1.234-1.638 1.697z" fill="#1DA1F2" fill-rule="evenodd"/></svg></button> </span> </div>
</div> <script src='https://code.jquery.com/jquery-2.1.0.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG Social Icons - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
html { background: #fafafa; font-family: 'Avenir Next', 'Open Sans'; font-weight: 300;
}
html, body { height: 100%;
}
.container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.p1-social { text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.p1-social .p1-social-button, .p1-social button.p1-social-button { padding: 0; margin: 0; line-height: 0.5; background: transparent; border: none; position: relative;
}
.p1-social .p1-social-button:after, .p1-social button.p1-social-button:after { height: 50%; width: 82%; background: transparent; content: ''; position: absolute; top: 50%; left: 9%; box-shadow: 0 0.2rem 1.5rem rgba(0, 0, 0, 0.3); z-index: -1; -webkit-transition: all 100ms ease; transition: all 100ms ease;
}
.p1-social .p1-social-button:hover:after, .p1-social button.p1-social-button:hover:after { box-shadow: 0 0.3rem 1.7rem rgba(0, 0, 0, 0.3); -webkit-transition: all 100ms ease; transition: all 100ms ease;
}
.p1-social .p1-social-button:active:after, .p1-social button.p1-social-button:active:after { box-shadow: 0 0.05rem 1rem rgba(0, 0, 0, 0.3); -webkit-transition: all 100ms ease; transition: all 100ms ease;
}
.p1-social .p1-social-button:focus, .p1-social button.p1-social-button:focus { outline: 0;
}
.p1-social svg { background: #fff; width: 2rem; position: relative;
}
.p1-social-twitter path { fill: #1da1f2; -webkit-transition: all 100ms ease; transition: all 100ms ease;
}
.p1-social-twitter:hover path { fill: #4ab4f5; -webkit-transition: all 100ms ease; transition: all 100ms ease;
}
.p1-social-twitter:active path { fill: #0c84cd; -webkit-transition: all 100ms ease; transition: all 100ms ease;
}
.p1-social-facebook path { fill: #365899; -webkit-transition: all 100ms ease; transition: all 100ms ease;
}
.p1-social-facebook:hover path { fill: #4c74c0; -webkit-transition: all 100ms ease; transition: all 100ms ease;
}
.p1-social-facebook:active path { fill: #2b467a; -webkit-transition: all 100ms ease; transition: all 100ms ease;
}
.p1-social-pinterest path { fill: #bd081c; -webkit-transition: all 100ms ease; transition: all 100ms ease;
}
.p1-social-pinterest:hover path { fill: #ea0a23; -webkit-transition: all 100ms ease; transition: all 100ms ease;
}
.p1-social-pinterest:active path { fill: #a10718; -webkit-transition: all 100ms ease; transition: all 100ms ease;
}

SVG Social Icons - Script Codes JS Codes

window.p1social = { f: { u: 'https://www.facebook.com/sharer/sharer.php?u={{uri}}', h: 400, w: 600 }, p: { u: 'https://www.pinterest.com/pin/create/button/?url={{uri}}&media={{media}}&description={{description}}', h: 540, w: 720 }, t: { u: 'https://twitter.com/intent/tweet?text={{status}}&url={{uri}}&via={{via}}', h: 250, w: 600 } };
window.p1share = function (platform) { var uri = encodeURIComponent($('meta[property="og:url"]').attr('content') || window.location.href); var description = encodeURIComponent(($('meta[property="og:title"]').attr('content') || document.title) + ' | ' + ($('meta[property="og:site_name"]').attr('content') || window.location.hostname)); var media = encodeURIComponent($('meta[property="og:image"]').attr('content') || 'https://placehold.it/300x150?text=Image+Not+Available') var via = 'twitter'; var shareUri = window.p1social[platform].u .replace('{{uri}}', uri) .replace('{{description}}', description) .replace('{{status}}', description) .replace('{{via}}', via) .replace('{{media}}', media); console.log(shareUri); var shareWindow = window.open( shareUri, 'shareWindow', 'location=no, \ directories=no, \ titlebar=no,\ toolbar=no, \ status=no, \ menubar=no, \ scrollbars=yes, \ resizable=yes, \ width=' + parseInt(window.p1social[platform].w) + ', \ height=' + parseInt(window.p1social[platform].h) );
}
SVG Social Icons - Script Codes
SVG Social Icons - Script Codes
Home Page Home
Developer Kendrick Arnett
Username kendrick
Uploaded August 11, 2022
Rating 3
Size 4,587 Kb
Views 46,552
Do you need developer help for SVG Social Icons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kendrick Arnett (kendrick) Script Codes
Name
Flexbox Resume Challenge
A Pen by Kendrick Arnett
SVG Button
Pulse for Skeleton Screens
Linkish Buttons
Reasonably Shadowed Button
Duotone Fixed Backgrounds
Include-media Include
Postfix Badge Button
Lazy Image Loading via ScrollMagic
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!