Question

I have found a website that someone used only css and html to make a Windows 7 start menu. Also I have noticed that there is a magnifying glass in the search bar.

My question is how did this person get character/symbol there as I cant find any magnifying glasses on the web and I assume he didn’t us any images for this menu.

Here is the link to the site

If someone is too lazy here is the pic of the site but you may not find out what it is without the source so please visit the site .

Answer 1

He used ::before and ::after on the <form> to draw a circle and a rotated line.

You can see it in Chrome’s inspector:

#menu .left-menu form#search::before {
    content: "";
    width: 3px;
    height: 0px;
    border: 1px solid #666;
    position: absolute;
    z-index: 3;
    left: 100%;
    margin-left: -41px;
    top: 23px;
    -webkit-transform: rotate(-41deg);
    -moz-transform: rotate(-41deg);
    -ms-transform: rotate(-41deg);
    -o-transform: rotate(-41deg);
    transform: rotate(-41deg);

}

#menu .left-menu form#search::after {
    content: "";
    width: 5px;
    height: 5px;
    border: 1px solid #666;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    left: 100%;
    margin-left: -37px;
    top: 16px;

}