User Icons

Developer
Nick Nikolov
Size
3,351 Kb
Views
32,384
  1. User Icons Previews
  2. User Icons HTML Codes
  3. User Icons CSS Codes

How do I make an user icons?

User icons based on the first letter of their name. What is a user icons? How do you make a user icons? This script and codes were developed by Nick Nikolov on 17 October 2022, Monday.

User Icons Previews
IQ Test

User Icons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>User Icons</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { font-size: 12px; font-family: Arial; padding: 0px; margin: 0px;
}
.profile { padding: 20px 10px;
}
.profile .profile-detail { margin-left: 50px;
}
.profile .profile-detail h2 { padding: 0px; margin: 0px; font-size: 18px;
}
.user-icon { float: left; height: 40px; width: 40px; line-height: 40px; border-radius: 2px; background: #aaa; text-align: center; color: #fff; font-size: 18px; text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px;
}
.user-icon-a { background: #5b67d0;
}
.user-icon-a:after { content: 'A';
}
.user-icon-b { background: #785bd0;
}
.user-icon-b:after { content: 'B';
}
.user-icon-c { background: #a15bd0;
}
.user-icon-c:after { content: 'C';
}
.user-icon-d { background: #ca5bd0;
}
.user-icon-d:after { content: 'D';
}
.user-icon-e { background: #d05bad;
}
.user-icon-e:after { content: 'E';
}
.user-icon-f { background: #d05b84;
}
.user-icon-f:after { content: 'F';
}
.user-icon-g { background: #d05b5b;
}
.user-icon-g:after { content: 'G';
}
.user-icon-h { background: #d0845b;
}
.user-icon-h:after { content: 'H';
}
.user-icon-i { background: #d0ad5b;
}
.user-icon-i:after { content: 'I';
}
.user-icon-j { background: #cbd05b;
}
.user-icon-j:after { content: 'J';
}
.user-icon-k { background: #a2d05b;
}
.user-icon-k:after { content: 'K';
}
.user-icon-l { background: #79d05b;
}
.user-icon-l:after { content: 'L';
}
.user-icon-m { background: #5bd066;
}
.user-icon-m:after { content: 'M';
}
.user-icon-n { background: #5bd08f;
}
.user-icon-n:after { content: 'N';
}
.user-icon-o { background: #5bd0b8;
}
.user-icon-o:after { content: 'O';
}
.user-icon-p { background: #5bbfd0;
}
.user-icon-p:after { content: 'P';
}
.user-icon-q { background: #5b96d0;
}
.user-icon-q:after { content: 'Q';
}
.user-icon-r { background: #5b6dd0;
}
.user-icon-r:after { content: 'R';
}
.user-icon-s { background: #725bd0;
}
.user-icon-s:after { content: 'S';
}
.user-icon-t { background: #9b5bd0;
}
.user-icon-t:after { content: 'T';
}
.user-icon-u { background: #c45bd0;
}
.user-icon-u:after { content: 'U';
}
.user-icon-v { background: #d05bb3;
}
.user-icon-v:after { content: 'V';
}
.user-icon-w { background: #d05b8a;
}
.user-icon-w:after { content: 'W';
}
.user-icon-x { background: #d05b61;
}
.user-icon-x:after { content: 'X';
}
.user-icon-y { background: #d07e5b;
}
.user-icon-y:after { content: 'Y';
}
.user-icon-z { background: #d0a75b;
}
.user-icon-z:after { content: 'Z';
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="profile"> <div class="user-icon user-icon-a"></div> <div class="profile-detail"> <h2>Amanda Smith</h2> <p>Sales Director</p> </div>
</div>
<div class="profile"> <div class="user-icon user-icon-n"></div> <div class="profile-detail"> <h2>Nick Frost</h2> <p>CEO</p> </div>
</div>
<div class="profile"> <div class="user-icon user-icon-g"></div> <div class="profile-detail"> <h2>Gillian Cooper</h2> <p>Web designer</p> </div>
</div>
</body>
</html>

User Icons - Script Codes CSS Codes

* { font-size: 12px; font-family: Arial; padding: 0px; margin: 0px;
}
.profile { padding: 20px 10px;
}
.profile .profile-detail { margin-left: 50px;
}
.profile .profile-detail h2 { padding: 0px; margin: 0px; font-size: 18px;
}
.user-icon { float: left; height: 40px; width: 40px; line-height: 40px; border-radius: 2px; background: #aaa; text-align: center; color: #fff; font-size: 18px; text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px;
}
.user-icon-a { background: #5b67d0;
}
.user-icon-a:after { content: 'A';
}
.user-icon-b { background: #785bd0;
}
.user-icon-b:after { content: 'B';
}
.user-icon-c { background: #a15bd0;
}
.user-icon-c:after { content: 'C';
}
.user-icon-d { background: #ca5bd0;
}
.user-icon-d:after { content: 'D';
}
.user-icon-e { background: #d05bad;
}
.user-icon-e:after { content: 'E';
}
.user-icon-f { background: #d05b84;
}
.user-icon-f:after { content: 'F';
}
.user-icon-g { background: #d05b5b;
}
.user-icon-g:after { content: 'G';
}
.user-icon-h { background: #d0845b;
}
.user-icon-h:after { content: 'H';
}
.user-icon-i { background: #d0ad5b;
}
.user-icon-i:after { content: 'I';
}
.user-icon-j { background: #cbd05b;
}
.user-icon-j:after { content: 'J';
}
.user-icon-k { background: #a2d05b;
}
.user-icon-k:after { content: 'K';
}
.user-icon-l { background: #79d05b;
}
.user-icon-l:after { content: 'L';
}
.user-icon-m { background: #5bd066;
}
.user-icon-m:after { content: 'M';
}
.user-icon-n { background: #5bd08f;
}
.user-icon-n:after { content: 'N';
}
.user-icon-o { background: #5bd0b8;
}
.user-icon-o:after { content: 'O';
}
.user-icon-p { background: #5bbfd0;
}
.user-icon-p:after { content: 'P';
}
.user-icon-q { background: #5b96d0;
}
.user-icon-q:after { content: 'Q';
}
.user-icon-r { background: #5b6dd0;
}
.user-icon-r:after { content: 'R';
}
.user-icon-s { background: #725bd0;
}
.user-icon-s:after { content: 'S';
}
.user-icon-t { background: #9b5bd0;
}
.user-icon-t:after { content: 'T';
}
.user-icon-u { background: #c45bd0;
}
.user-icon-u:after { content: 'U';
}
.user-icon-v { background: #d05bb3;
}
.user-icon-v:after { content: 'V';
}
.user-icon-w { background: #d05b8a;
}
.user-icon-w:after { content: 'W';
}
.user-icon-x { background: #d05b61;
}
.user-icon-x:after { content: 'X';
}
.user-icon-y { background: #d07e5b;
}
.user-icon-y:after { content: 'Y';
}
.user-icon-z { background: #d0a75b;
}
.user-icon-z:after { content: 'Z';
}
User Icons - Script Codes
User Icons - Script Codes
Home Page Home
Developer Nick Nikolov
Username necks
Uploaded October 17, 2022
Rating 3
Size 3,351 Kb
Views 32,384
Do you need developer help for User 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 Nikolov (necks) Script Codes
Name
Simple grid layout
Spinning Loader
Checkbox
Simple drawer menu
SVG Clock
A Pen by Nick Nikolov
Subtle site navigation with description
Gallery with blur slide up info on hover
Simple fluid navigation with 4 hover effects
Table cell corner indicator
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!