Social Icons
How do I make an social icons?
Social icons with sliding information.. What is a social icons? How do you make a social icons? This script and codes were developed by Miro Karilahti on 07 July 2022, Thursday.
Social Icons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>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="social-icons"> <a class="item fa fa-twitter" href="#">@MyTwitter</a><a class="item fa fa-dribbble" href="#">My Dribbble</a><a class="item fa fa-pinterest" href="#">My Pinterest</a><a class="item fa fa-envelope" href="#">[email protected]</a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Social Icons - Script Codes CSS Codes
@import url("//fonts.googleapis.com/css?family=Roboto:500");
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
body { background-color: #212121;
}
.social-icons { width: 100%; height: 150px; position: absolute; top: 50%; margin-top: -75px; text-align: center;
}
.social-icons .item { width: 150px; height: 150px; background-color: #616161; display: inline-block; margin: 0 16px; font-weight: 500; text-align: center; text-decoration: none; line-height: 90px; color: #212121; overflow: hidden; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}
.social-icons .item:before { background-color: #424242; display: block; font-size: 4.2em; font-weight: normal; line-height: 150px; color: #757575; -webkit-transition: font-size .5s, line-height .5s; transition: font-size .5s, line-height .5s;
}
.social-icons .item:hover:before { font-size: 200%; line-height: 50px;
}Social Icons - Script Codes JS Codes
/* The main idea is in hiding content with 'overflow: hidden' 28.4.2014 - Fixed link for Foundation Icons 16.9.2014 - Cleaned the code and made some small changes 8.11.2014 - Changed the icons to Font Awesome hosted by MaxCDN
*/
| Developer | Miro Karilahti |
| Username | miroot |
| Uploaded | July 07, 2022 |
| Rating | 4.5 |
| Size | 2,941 Kb |
| Views | 52,624 |
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!
| Name | Size |
| Long Shadow Calendar Icon | 1,856 Kb |
| Navigation | 2,298 Kb |
| Corner Ribbons | 1,911 Kb |
| Pure CSS Card Deck | 3,245 Kb |
| Expanding Photo Stack | 2,083 Kb |
| Flat Text Editor | 2,468 Kb |
| Background change in pure CSS | 3,236 Kb |
| Calendar | 2,033 Kb |
| Login Form | 2,519 Kb |
| Long Shadow Camera Icon | 1,825 Kb |
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!
| Name | Username | Size |
| LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
| Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
| LBCA - Mail canvas | Emnbdx | 3,856 Kb |
| Fluid Layout with Float | Jxqr97 | 1,785 Kb |
| Boxes | H3l1um | 2,563 Kb |
| Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
| A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
| Mario | Takaneichinose | 3,902 Kb |
| Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
| Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!