如何顯示帶有透明背景和白色邊框的圖標？

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

祝好運。