How to achieve a particular shadow effect inside the circle - css

Question

I want something like this but, unfortunately not able to get this shaddow effect any help would be great
.circle{
width:50px;
height:50px;
border-radius:50%;
background-color :yellow;
display:flex;
align-items:center;
justify-content:center;
}
.inner_img{
}
I want something like this:
here is the attach fiddle file http://jsfiddle.net/3u0mxjqq/188/

Answer 1

I tried to replicate the same effect using text-shadow: rgb(39, 118, 152) -1px 1px. Check this fiddle
.inner_img {
color: white;
font-size: 22px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.icon {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(59, 175, 228);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-shadow: rgb(39, 118, 152) -1px 1px, rgb(39, 118, 152) -2px 2px, rgb(39, 118, 152) -3px 3px, rgb(39, 118, 152) -4px 4px, rgb(39, 118, 152) -5px 5px, rgb(39, 118, 152) -6px 6px, rgb(39, 118, 152) -7px 7px, rgb(39, 118, 152) -8px 8px, rgb(39, 118, 152) -9px 9px, rgb(39, 118, 152) -10px 10px, rgb(39, 118, 152) -11px 11px, rgb(39, 118, 152) -12px 12px, rgb(39, 118, 152) -13px 13px, rgb(39, 118, 152) -14px 14px, rgb(39, 118, 152) -15px 15px, rgb(39, 118, 152) -16px 16px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="icon">
<div class="inner_img">
<i class="fa fa-search"></i>
</div>
</div>
</div>

Answer 2

It's not possible using box-shadow rule alongside font-awesome glyphs.
You can achieve that effect using multiple text-shadow instances.
Solution (CSS3 only / working IE10+)
.circle{
width:50px;
height:50px;
border-radius:50%;
background-color :yellow;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.fa-search{
text-shadow:rgb(148, 148, 0) 1px 1px, rgb(148, 148, 0) 2px 2px, rgb(148, 148, 0) 3px 3px, rgb(148, 148, 0) 4px 4px, rgb(148, 148, 0) 5px 5px, rgb(148, 148, 0) 6px 6px, rgb(148, 148, 0) 7px 7px, rgb(148, 148, 0) 8px 8px, rgb(148, 148, 0) 9px 9px, rgb(148, 148, 0) 10px 10px, rgb(148, 148, 0) 11px 11px, rgb(148, 148, 0) 12px 12px, rgb(148, 148, 0) 13px 13px, rgb(148, 148, 0) 14px 14px, rgb(148, 148, 0) 15px 15px, rgb(148, 148, 0) 16px 16px, rgb(148, 148, 0) 17px 17px, rgb(148, 148, 0) 18px 18px, rgb(148, 148, 0) 19px 19px, rgb(148, 148, 0) 20px 20px, rgb(148, 148, 0) 21px 21px, rgb(148, 148, 0) 22px 22px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="circle">
<i class="fa fa-search"></i>
</div>

Answer 3

One way would be to make a div and position it exactly in the correct spot as if it were a shadow of your choice. That along with the proper z-index would make it possible to position it correctly under the image in the middle but on top of the circle. Hope this helped. If you want to make the circle glow see: http://cssdeck.com/labs/glowing-circle
Also, if an image is included in the middle of the circle, the box-shadow could also work to provide a shadow of any color outside in any direction of the image.