如何显示带有透明背景和白色边框的图标？

Question

我有一个带有此图标的PSD

但是我尝试过的在这里

这是我的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;
}

请帮我

Answer 1

编辑：实际上，我尝试创建它，但它并不能按照您想要的方式工作，使用纯CSS / JS创建它似乎比仅添加该图像要困难得多。

使用手机的反面版本，并为其提供正确的颜色以匹配您的背景。 即<i class="fa fa-phone-square"></i>

Answer 2

首先，请确保您具有透明的背景图像。 接下来，使用“ PNG”文件扩展名保存图像，然后可以在Photoshop上执行以下操作：转到文件菜单，然后从选项中选择“另存为”，并确保在保存时选择了PNG文件扩展名。

剩下的事情很容易，您只需要在我们的HTML中包含PNG图像并使用CSS更改容器DIV背景即可。

祝好运。