How to Make an Avatar Icon using Nothing but CSS & HTML
Okay so it’s a bit cheesy but I was working on a clients site and wanted to have an avatar icon next to the button where they login. The site’s CSS uses almost no images, and there is no icon font loaded…so I didn’t want to resort to either of those.
I came up with Mr. Smiles here. He’s got a face, and a tie.
Click the image above to see it in action, but here is the CSS:
body {font-family:sans-serif;}
.avatar {
text-decoration:none;
background:#36bed4;
color:white;
padding:15px;
position:relative;
padding-left:55px;
width:250px;
}
.avatar:before, .avatar:after {
position:absolute;
color:#36bed4;
background:white;
}
.avatar:before {
content:"?";
border:0px solid white;
border-radius:25px;
top:-3px;
left:16px;
height:28px;
width:30px;
line-height:70%;
font-size:44px;
font-weight: normal;
text-indent:-1px;
}
.avatar:after {
content:"?";
border-radius:20px;
top:24px;
left:13px;
width:39px;
height:43px;
text-align: center;
font-size:33px;
font-weight:bold;
line-height:130%;
}And the beautifully short and sweet HTML:
<a class="avatar" href="#">Your Account</a>After that, I figured I’d come up with a less hokey, more traditional style icon.
Click the image to see it in the wild.
CSS:
body {font-family:sans-serif;}
.avatar {
text-decoration:none;
background:#36bed4;
color:#36bed4;
position:relative;
padding-left:55px;
width:150px;
height:200px;
border-radius:250px;
display:block;
line-height:240%;
overflow:hidden;
}
.avatar:before, .avatar:after {
position:absolute;
color:#36bed4;
background:white;
box-shadow:0 0 10px 0px rgba(0,0,0,0.2);
}
.avatar:before {
content: "\00a0";
border: 0px solid white;
border-radius: 75px;
top: 20px;
left: 50%;
height: 100px;
width: 100px;
line-height: 70%;
font-size: 44px;
font-weight: normal;
text-indent: -1px;
margin-left: -25%;
z-index:5;
}
.avatar:after {
content: "\00a0";
border-radius: 20px;
top: 115px;
left: 50%;
width: 100px;
height: 103px;
text-align: center;
font-size: 33px;
font-weight: bold;
line-height: 130%;
margin-left: -25%;
}HTML:
<a class="avatar" href="#">Your Account</a>