CSS Icons

Developer
Nick Hehr
Size
3,516 Kb
Views
22,264
  1. CSS Icons Previews
  2. CSS Icons HTML Codes
  3. CSS Icons CSS Codes

How do I make an css icons?

What is a css icons? How do you make a css icons? This script and codes were developed by Nick Hehr on 15 August 2022, Monday.

CSS Icons Previews
IQ Test

CSS Icons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Icons</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ol id="frame"> <li class="icon burg"></li> <li class="icon home"></li> <li class="icon prof"></li> <li class="icon sett"></li> <li class="icon mail"></li> <li class="icon noti"></li> <li class="icon hart"></li>
</ol> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CSS Icons - Script Codes CSS Codes

body { background: #e7eced;
}
::selection { background: transparent;
}
#frame { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 245px; height: 30px; padding: 5px 5px 5px 0; margin: auto; display: block;
}
.icon { cursor: pointer; position: relative; float: left; width: 30px; height: 30px; margin-left: 5px; border-radius: 100%; background: rgba(0, 0, 0, 0.1); display: block;
}
/* ALL */
.burg:before, .burg:after,
.home:before, .home:after,
.prof:before, .prof:after,
.sett:before, .sett:after,
.mail:before, .mail:after,
.noti:before, .noti:after,
.hart:before, .hart:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: block; -webkit-transition: .15s linear;
}
/* BURGER */
.burg:before { width: 10px; height: 2px; background: #938; box-shadow: 0 -3px #938, 0 3px #938;
}
.burg:hover:before { -webkit-transform: rotate(-90deg);
}
/* HOME */
.home:before { top: 6px; width: 8px; height: 6px; border-width: 0 2px 2px 2px; border-style: solid; border-color: #938;
}
.home:after { width: 10px; height: 10px; border-width: 2px 2px 0 0; border-style: solid; border-color: #938 #938 transparent transparent; -webkit-transform: rotate(-45deg);
}
.home:hover:after { top: -4px; -webkit-transform: rotate(-65deg);
}
/* PROFILE */
.prof:before { top: -8px; width: 8px; height: 8px; border-radius: 100%; background: #938;
}
.prof:hover:before { top: -12px;
}
.prof:after { bottom: -9px; width: 12px; height: 6px; border-radius: 4px 4px 2px 2px; background: #938;
}
/* SETTINGS */
.sett:before { width: 8px; height: 8px; border-radius: 100%; border: 3px solid #938;
}
.sett:after { width: 12px; height: 12px; border-radius: 100%; border: 3px dotted #938;
}
.sett:hover:before,
.sett:hover:after { -webkit-transform: scale(1.1);
}
/* MAIL */
.mail:before { width: 14px; height: 10px; border-radius: 3px; border: 2px solid #938;
}
.mail:hover:before { height: 14px;
}
.mail:after { top: -12px; width: 10px; height: 10px; border-radius: 0 0 3px 3px; border-width: 2px; border-style: solid; border-color: transparent #938 #938 transparent; -webkit-transform: rotate(45deg);
}
.mail:hover:after { top: -8px;
}
/* NOTIFICATIONS */
.noti:before { width: 4px; height: 4px; border-radius: 100%; background: #938; box-shadow: -5px -5px #938, 0 -5px #938, 5px -5px #938, -5px 0 #938, 5px 0 #938, -5px 5px #938, 0 5px #938, 5px 5px #938;
}
.noti:hover:before { box-shadow: none;
}
.noti:hover:after { content: '3'; top: -20px; right: -20px; width: 14px; height: 14px; border-radius: 14px 14px 14px 0; background: #B80000; font-family: 'Helvetica', Arial, sans-serif; font-size: 60%; color: #FFF; text-align: center; line-height: 14px;
}
/* HEART */
.hart:before { top: 2px; width: 10px; height: 10px; background: #938; -webkit-transform: rotate(45deg);
}
.hart:hover:before { background: #B80000;
}
.hart:after { top: 2px; width: 10px; height: 10px; border-radius: 100%; box-shadow: -4px -4px #938, 4px -4px #938;
}
.hart:hover:after { box-shadow: -4px -4px #B80000, 4px -4px #B80000;
}
CSS Icons - Script Codes
CSS Icons - Script Codes
Home Page Home
Developer Nick Hehr
Username HipsterBrown
Uploaded August 15, 2022
Rating 3
Size 3,516 Kb
Views 22,264
Do you need developer help for CSS 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!

Nick Hehr (HipsterBrown) Script Codes
Name
Pokedex Test
Playing with React-Motion
Welcome to Mavericks
Lettering Pure JS
Responsive Icons in CSS
ATOM Icon in CSS and Animated
Hexagonal Icon Backgrounds in CSS
Open Letter to YouTube
Triangular Pattern Background
A Sexy Button Hover
Create amazing marketing copy 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!