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

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背景。

祝你好运。