Social Icons

Developer
Mark Thomes
Size
8,247 Kb
Views
52,624
  1. Social Icons Previews
  2. Social Icons HTML Codes
  3. Social Icons CSS Codes

How do I make an social icons?

Working out styling my social media icons for my portfolio. Wanting to use SVG icons. Found a good system.. What is a social icons? How do you make a social icons? This script and codes were developed by Mark Thomes on 04 July 2022, Monday.

Social Icons Previews
IQ Test

Social Icons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Icons</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/7534eb3fb62294822de9eace9.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg width="0" height="0" viewBox="0 0 216 216">	<path id="twitter" d="M214.6,0H1.4C0.6,0,0,0.6,0,1.4v213.1c0,0.8,0.6,1.4,1.4,1.4h213.1c0.8,0,1.4-0.6,1.4-1.4V1.4	C216,0.6,215.4,0,214.6,0z M181,70.6c0.1,1.6,0.1,3.2,0.1,4.9c0,49.8-37.9,107.2-107.2,107.2c-21.3,0-41.1-6.2-57.7-16.9	c2.9,0.3,5.9,0.5,9,0.5c17.6,0,33.9-6,46.8-16.1c-16.5-0.3-30.4-11.2-35.2-26.2c2.3,0.4,4.7,0.7,7.1,0.7c3.4,0,6.8-0.5,9.9-1.3	c-17.2-3.5-30.2-18.7-30.2-36.9c0-0.2,0-0.3,0-0.5c5.1,2.8,10.9,4.5,17.1,4.7c-10.1-6.8-16.8-18.3-16.8-31.4	c0-6.9,1.9-13.4,5.1-18.9c18.6,22.8,46.3,37.8,77.6,39.4c-0.6-2.8-1-5.6-1-8.6c0-20.8,16.9-37.7,37.7-37.7	c10.8,0,20.6,4.6,27.5,11.9c8.6-1.7,16.6-4.8,23.9-9.1c-2.8,8.8-8.8,16.2-16.6,20.8c7.6-0.9,14.9-2.9,21.6-5.9	C194.8,58.6,188.4,65.2,181,70.6z"/>	<g id="codepen">	<polygon class="inner" points="38.3,136 100.1,177.2 100.1,140.4 65.9,117.5 "/>	<polygon points="177.7,80 115.9,38.8 115.9,75.6 150.1,98.5 "/>	<polygon points="32,94.8 32,121.2 51.7,108 "/>	<polygon points="108,89.3 80.1,108 108,126.7 135.9,108 "/>	<polygon points="100.1,75.6 100.1,38.8 38.3,80 65.9,98.5 "/>	<path d="M214.6,0H1.4C0.6,0,0,0.6,0,1.4v213.1c0,0.8,0.6,1.4,1.4,1.4h213.1c0.8,0,1.4-0.6,1.4-1.4V1.4C216,0.6,215.4,0,214.6,0z M199.8,136c0,0.3,0,0.7-0.1,1c0,0.1,0,0.2-0.1,0.3c0,0.2-0.1,0.4-0.1,0.7c0,0.1-0.1,0.3-0.1,0.4c-0.1,0.2-0.1,0.4-0.2,0.6	c-0.1,0.1-0.1,0.3-0.2,0.4c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.1,0.2-0.2,0.4c-0.1,0.2-0.2,0.3-0.3,0.5c-0.1,0.1-0.2,0.2-0.3,0.3	c-0.1,0.1-0.3,0.3-0.4,0.4c-0.1,0.1-0.2,0.2-0.3,0.3c-0.1,0.1-0.3,0.3-0.4,0.4c-0.1,0.1-0.2,0.2-0.4,0.3c0,0-0.1,0.1-0.1,0.1	l-83.9,55.9c-1.3,0.9-2.9,1.3-4.4,1.3c-1.5,0-3.1-0.4-4.4-1.3l-83.9-55.9c0,0-0.1-0.1-0.1-0.1c-0.1-0.1-0.2-0.2-0.4-0.3	c-0.2-0.1-0.3-0.2-0.4-0.4c-0.1-0.1-0.2-0.2-0.3-0.3c-0.1-0.1-0.3-0.3-0.4-0.4c-0.1-0.1-0.2-0.2-0.3-0.3c-0.1-0.2-0.2-0.3-0.3-0.5	c-0.1-0.1-0.2-0.2-0.2-0.4c-0.1-0.2-0.2-0.3-0.3-0.5c-0.1-0.1-0.1-0.3-0.2-0.4c-0.1-0.2-0.1-0.4-0.2-0.6c0-0.1-0.1-0.3-0.1-0.4	c-0.1-0.2-0.1-0.4-0.1-0.7c0-0.1,0-0.2-0.1-0.3c0-0.3-0.1-0.7-0.1-1V80c0-0.3,0-0.7,0.1-1c0-0.1,0-0.2,0.1-0.3	c0-0.2,0.1-0.4,0.1-0.7c0-0.1,0.1-0.3,0.1-0.4c0.1-0.2,0.1-0.4,0.2-0.6c0.1-0.1,0.1-0.3,0.2-0.4c0.1-0.2,0.2-0.4,0.3-0.5	c0.1-0.1,0.1-0.2,0.2-0.4c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.1,0.3-0.3,0.4-0.4c0.1-0.1,0.2-0.2,0.3-0.3	c0.1-0.1,0.3-0.3,0.4-0.4c0.1-0.1,0.2-0.2,0.4-0.3c0,0,0.1-0.1,0.1-0.1l83.9-55.9c2.7-1.8,6.1-1.8,8.8,0l83.9,55.9	c0,0,0.1,0.1,0.1,0.1c0.1,0.1,0.2,0.2,0.4,0.3c0.2,0.1,0.3,0.2,0.4,0.4c0.1,0.1,0.2,0.2,0.3,0.3c0.1,0.1,0.3,0.3,0.4,0.4	c0.1,0.1,0.2,0.2,0.3,0.3c0.1,0.2,0.2,0.3,0.3,0.5c0.1,0.1,0.2,0.2,0.2,0.4c0.1,0.2,0.2,0.3,0.3,0.5c0.1,0.1,0.1,0.3,0.2,0.4	c0.1,0.2,0.1,0.4,0.2,0.6c0,0.1,0.1,0.3,0.1,0.4c0.1,0.2,0.1,0.4,0.1,0.7c0,0.1,0,0.2,0.1,0.3c0,0.3,0.1,0.7,0.1,1V136z"/>	<polygon points="115.9,140.4 115.9,177.2 177.7,136 150.1,117.5	"/>	<polygon points="184,121.2 184,94.8 164.3,108	"/>	</g>	<g id="behance">	<path d="M85.7,115.3c-2.7-2-6.3-3.1-10.7-3.1H52.7v25.7h21.9c2,0,4-0.2,5.8-0.6c1.8-0.4,3.5-1,4.8-2c1.4-0.9,2.5-2.1,3.3-3.7	c0.8-1.6,1.2-3.6,1.2-6.1C89.8,120.8,88.4,117.3,85.7,115.3z"/>	<path d="M82.5,95.5c2.4-1.7,3.5-4.6,3.5-8.5c0-2.2-0.4-4-1.1-5.4c-0.8-1.4-1.8-2.5-3.2-3.2c-1.3-0.8-2.8-1.3-4.5-1.6	c-1.7-0.3-3.5-0.5-5.3-0.5H52.7v21.8h20.8C77.1,98.2,80.1,97.3,82.5,95.5z"/>	<path d="M214.6,0H1.4C0.6,0,0,0.6,0,1.4v213.1c0,0.8,0.6,1.4,1.4,1.4h213.1c0.8,0,1.4-0.6,1.4-1.4V1.4C216,0.6,215.4,0,214.6,0z M131.2,66.7h37.9v9.2h-37.9V66.7z M107.6,138.9c-1.8,3.5-4.3,6.3-7.4,8.5c-3.1,2.2-6.6,3.8-10.6,4.8c-3.9,1-8,1.6-12.2,1.6H32.1	V60.4h44c4.5,0,8.5,0.4,12.2,1.2c3.7,0.8,6.8,2.1,9.4,3.9c2.6,1.8,4.6,4.1,6.1,7.1c1.4,2.9,2.1,6.6,2.1,11c0,4.7-1.1,8.6-3.2,11.8	c-2.2,3.1-5.3,5.7-9.5,7.7c5.7,1.7,10,4.6,12.8,8.7c2.8,4.2,4.2,9.1,4.2,15C110.3,131.4,109.4,135.5,107.6,138.9z M183.8,124.5H135	c0,5.3,1.8,10.4,4.6,13.1c2.8,2.7,6.8,4.1,12,4.1c3.7,0,7-0.9,9.7-2.8c2.7-1.9,4.3-3.9,5-6h16.4c-2.6,8.1-6.6,13.9-12.1,17.4	c-5.4,3.5-11.9,5.3-19.6,5.3c-5.3,0-10.1-0.9-14.4-2.6c-4.3-1.7-7.9-4.1-10.9-7.3c-2.9-3.2-5.2-6.9-6.9-11.3	c-1.6-4.4-2.4-9.2-2.4-14.4c0-5.1,0.8-9.8,2.5-14.1c1.7-4.4,4-8.2,7.1-11.3c3.1-3.2,6.7-5.7,11-7.5c4.2-1.8,8.9-2.8,14.1-2.8	c5.7,0,10.7,1.1,15,3.3c4.3,2.2,7.8,5.2,10.5,9c2.8,3.7,4.7,8,5.9,12.8C183.7,114.2,184.1,119.2,183.8,124.5z"/>	<path d="M150.4,98.3c-3,0-5.4,0.5-7.4,1.5c-1.9,1-3.5,2.3-4.7,3.7c-1.2,1.5-2,3.1-2.5,4.8c-0.5,1.6-0.8,3.1-0.8,4.5h30.2	c-0.4-4.7-2.1-8.2-4.3-10.7C158.7,99.6,155,98.3,150.4,98.3z"/>	</g>	<path id="linkedin" d="M214.6,0H1.4C0.6,0,0,0.6,0,1.4v213.1c0,0.8,0.6,1.4,1.4,1.4h213.1c0.8,0,1.4-0.6,1.4-1.4V1.4	C216,0.6,215.4,0,214.6,0z M65.3,185.2H33.3V82.1h32.1V185.2z M49.3,68C39,68,30.7,59.7,30.7,49.4c0-10.2,8.3-18.6,18.6-18.6	c10.2,0,18.6,8.3,18.6,18.6C67.8,59.7,59.5,68,49.3,68z M185.3,185.2h-32V135c0-12-0.2-27.3-16.7-27.3c-16.7,0-19.2,13-19.2,26.5v51	h-32V82.1h30.7v14.1h0.4c4.3-8.1,14.7-16.6,30.3-16.6c32.4,0,38.4,21.3,38.4,49.1V185.2z"/>	<path id="github" d="M214.6,0H1.4C0.6,0,0,0.6,0,1.4v213.1c0,0.8,0.6,1.4,1.4,1.4h213.1c0.8,0,1.4-0.6,1.4-1.4V1.4	C216,0.6,215.4,0,214.6,0z M135.3,198.2v-21.6c0-10.7-4.6-16.4-8.9-19.3c24.1-2.6,50-11.2,50-52.9c0-11.7-4.1-21.3-11.1-28.7	c1.2-2.8,4.8-13.6-1.1-28.4c0,0-8.9-2.9-29.3,11c-8.6-2.3-17.8-3.5-26.8-3.6c-9.1,0.1-18.3,1.3-26.8,3.6c-20.4-13.8-29.4-11-29.4-11	C46,62,49.7,72.8,50.8,75.6c-6.8,7.4-10.9,17-10.9,28.7c0,41.8,25.8,50.5,50,53c-1.7,0.5-6.9,1.9-8.3,8.6	c-4.6,2.2-19.3,7.8-28.3-7.5c0,0-5-9-14.5-9.7c0,0-9.2-0.1-0.6,5.7c0,0,6.2,2.9,10.4,13.8c0,0,5.6,18.6,32.4,12.5v17.3	c-37.5-12.2-64.7-47.2-64.7-88.5c0-50.7,41.1-91.8,91.7-91.8c50.7,0,91.9,41.1,91.9,91.8C199.8,150.9,172.7,185.8,135.3,198.2z"/>
</svg>
<div class="icons"> <svg class="icon" viewBox="0 0 216 216"> <use xlink:href="#twitter"></use> </svg> <svg class="icon" viewBox="0 0 216 216"> <use xlink:href="#codepen"></use> </svg> <svg class="icon" viewBox="0 0 216 216"> <use xlink:href="#behance"></use> </svg> <svg class="icon" viewBox="0 0 216 216"> <use xlink:href="#linkedin"></use> </svg> <svg class="icon" viewBox="0 0 216 216"> <use xlink:href="#github"></use> </svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/footer-inject.js'></script>
</body>
</html>

Social Icons - Script Codes CSS Codes

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { margin: 0; padding: 0; font-size: 0; background: #333;
}
.icons { width: 800px; margin: 60px auto 0; padding: 20px; cursor: pointer;
}
.icon { width: 140px; height: 140px; padding: 10px; fill: rgba(179, 195, 58, 0); stroke: #b3c33a; stroke-width: 2px; transition: all 0.25s ease;
}
.icon:hover, .icon:focus { fill: #b3c33a; transition: all 0.15s ease;
}
Social Icons - Script Codes
Social Icons - Script Codes
Home Page Home
Developer Mark Thomes
Username WithAnEs
Uploaded July 04, 2022
Rating 4.5
Size 8,247 Kb
Views 52,624
Do you need developer help for 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!

Mark Thomes (WithAnEs) Script Codes
Name
CSS Birthday Cake
Running Character
CSS Books
CSS3 Gradient Stripes
Popup Footer
Twitter Feed Loading Animation
Swaying Open Sign
CSS Self Portrait
Animation Delay Debug
Basic Menu CSS
Create amazing sales emails 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!