How can I show icon with transparent background and white border?

Question

I have an PSD that has this icon

but what i tried is here

here is my css

.box_bg_org i{
    background-color: #e98b39;
    /*background: transparent;*/
    font-size: 30px;
    color: #fff;
    padding: 30px;
}
.box_bg_org i.fa-phone{
color: transparent;
-moz-text-shadow: 2px 2px 0px #fff;  
text-shadow: 2px 2px 0px #fff;
}

please help me

Answer 1

First make sure you have a transparent background image. Next save your image with a "PNG" file extension and you can do that on Photoshop by going to file menu and selct "Save As" from the options and make sure you select the PNG file extension while saving.

The rest is easy you just have to include your PNG image in our HTML and change the container DIV background using CSS.

Good Luck.

Answer 2

EDIT: Actually, I tried creating that and it doesn't work the way you want it, creating this using pure CSS/JS seems like a much harder thing to do than just add that image.

Use the inverse version of the phone and give it the right color to match your background. i.e. <i class="fa fa-phone-square"></i>