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

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 创建它似乎比仅添加更难那张图片。

~~使用 phone 的反转版本并赋予它正确的颜色以匹配您的背景。即 <i class="fa fa-phone-square"></i>~~

Answer 2

首先确保你有一个透明的背景图片。接下来用 "PNG" 文件扩展名保存你的图像，你可以在 Photoshop 上执行此操作，方法是转到文件菜单并从选项中选择 "Save As" 并确保你在保存时使用 select PNG 文件扩展名.

剩下的很简单，您只需将 PNG 图像包含在我们的 HTML 中并使用 CSS 更改容器 DIV 背景。

祝你好运。

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

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

html

css

font-awesome