The icon is hidden behind the background

I am a beginner and cannot find the answer. What am I doing wrong? The phone icon is hidden behind a white background. The setting is fine, but I want the icon to be on the front, followed by border and color.

.phone-icon {
    width: 15px;
    height: 15px;
    background-color: white;
    border-radius: 15%;
    margin-right: 3px;
    padding: 8px;
    vertical-align: middle;
}

<img  
alt="Phone number" 
src="images/phone.png">
</img>
<span >
 00 12 34 56 789
</span>

CodePudding user response：

LGTM!

I took a screenshot of you code snippet when it is run and added your icon as img src.

CodePudding user response：

I think the problem is : you're giving the color of white to your image by writing : background-color : white. Try to envelop your image with a <div> and give the white color to this div. like this :

<div >
   <img  
   alt="Phone number" 
   src="images/phone.png">
   </img>
   <span >
    00 12 34 56 789
  </span>
</div>

.phone-icon {
    width: 15px;
    height: 15px;
    border-radius: 15%;
    margin-right: 3px;
    padding: 8px;
    vertical-align: middle;
}
.white-div {
   background-color : white;
}