css need to work without the font css - html

Question

i have a codepen where the react functionality works fine...
but when I transfer into another codepen with same code its not working...due to the below link tag...
can you guys tell me how to make the current code working without this link tag...with a normal css
providing my code below..
working code
http://codepen.io/anon/pen/qbgxdb
not working code
http://codepen.io/anon/pen/YwBeWZ
.fa-search {
color: #2980b9;
font-size: 30px;
position: absolute;
top: 7px;
left: 8px;
cursor: pointer;
}
.fa-times-circle {
opacity: 0;
color: #d9d9d9;
font-size: 20px;
position: absolute;
top: 12px;
right: 8px;
transition: opacity 0.4s ease-out;
cursor: pointer;
}
.search-input {
position: absolute;
cursor: default;
left: 45px;
top: 6px;
width: 0;
padding: 5px;
border: none;
outline: none;
font-size: 18px;
line-height: 20px;
background-color: rgba(255, 255, 255, 0);
transition: width 0.4s ease-out;
}

Answer 1

Just improve the css and it will work even without the font awesome link.
.fa-search {
color: #2980b9;
font-size: 30px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
/* ------------------------- just add the css below */
height: 100%;
width: 100%;
border-radius: 50%;
}
Here is the working PEN
You can also specify exact pixel value as
height: 46px;
width: 46px;
as you outer div is with 50px height and 50px width with 2px border equals 46px height and 46px width as it has inherited box-sizing: border-box;