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.

an example HTML button with an icon of a smiling man wearing 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.

a silhouette of a person's face and upper torso, aka an avatar 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>

Up Next: Creating a my.cnf File in MAMP (not MAMP Pro)