Pure CSS Avatar / Account / Person Icon
You want an icon of a person to accompany your nifty new login link, but you can’t be bother with bulky font icons or trying to navigate the unwieldy world of “free” SVGs.
Never fear, here’s some CSS code you can use, free as in beer.
Just supplement the li in the code below with whatever element you want to attach the login-icon class.
Here’s what you’ll end up with:
li.login-icon {
position: relative;
padding-left: 1.25rem;
}
li.login-icon:before {
content: " ";
background: white;
box-shadow: 0 .25rem 0 .45rem black;
width: .55rem;
height: .55rem;
display: block;
border-radius: 50%;
position: absolute;
left: 0;
top: .75rem;
}
li.login-icon:after {
content: "";
background: white;
display: block;
position: absolute;
width: 1rem;
height: .6rem;
border-radius: 50%;
left: -.2rem;
top: 1.375rem;
border: .1rem solid black;
}