How to make Google Now microphone icon using CSS3?

Problem

I am trying to create the 'Google Now' microphone icon using pure CSS3.
The icon features a white microphone on a red circular background.
I tried font-awesome but in vain
I need your help to complete this task
No animations or functionality, just the icon

Problem courtesy of: user3813477

Solution

Google Now Icon Only with CSS

DEMO

output :

google now icon made with CSS

HTML :

<div class="gn"><div class="mc"></div></div>

CSS :

body{font-size: 15px;}
.gn{
  position:relative;
  margin: 5% auto;
  background-color:#FE2222;
  border-radius:50%;
  width:10em; height:10em;
}
:before, :after{
  content:'';
  position:absolute;
  background-color:#fff;
}
.gn:after{
  top:30%; left:43%;
  height:15%; width:14%;
  border-top-left-radius:50%;
  border-top-right-radius:50%;
}
.gn:before{
  top:40%; left:43%;
  height:15%; width:14%;
  border-bottom-left-radius:50%;
  border-bottom-right-radius:50%;
}
.mc{
  position:absolute;
  top:50%; left:37%;
  height:24%;
  width:26.5%;
  overflow:hidden;
}
.mc:before{
  bottom:50%;
  width:100%; height:100%;
  box-sizing:border-box;
  border-radius:50%;
  border:0.5em solid #fff;
  background:none;
}
.mc:after{
  top:50%; left:40%;
  width:20%; height:25%;
}
Solution courtesy of: web-tiki

Discussion

Demo

html

<div class=container><i class=icon-microphone></i></div>

css

@import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);
 * {
    margin:0;
    padding:0;
}
.container {
    width:150px;
    background-color:#e74c3c;
    display:block;
    margin:100px auto 0px auto;
    border-radius:100%;
    box-shadow:0px 0px 15px 2px #bdc3c7;
    cursor:pointer;
    transition:.3s all ease-in;
    position:relative;
}
.icon-microphone {
    color:white;
    font-size:60px;
    line-height:150px;
    display:block;
    text-align:center;
    transition:.1s all ease-in;
}
.container:hover {
    background-color:#27ae60;
}
.container:active {
    background-color:#e74c3c;
}
.container:active .icon-microphone {
    color:#ecf0f1;
}
Discussion courtesy of: 4dgaurav

This recipe can be found in it's original form on Stack Over Flow.