At no point have I claimed you had an issue with your HTML...
Moving on, I'm not sure why I missed it before but your CSS doesn't seem to match the elements in your HTML in regard to the images. You are references two classes (ui-icon-phone and ui-icon-mail) which don't actually exist, thus those background images are not being applied to anything. Aside from that, if you were to add those classes to elements on your page you should set the actual width and height and would still need to set a display of block or inline-block as well as set an empty content string in order to get background images working on a :before or :after selector. For example:
.ui-icon-phone:after {
background-image: url("../images/iphone_16x16.png");
width: 18px;
height: 18px;
content: '';
display: inline-block;
}
.ui-icon-mail:after {
background-image: url("../images/mail_16x16.png");
width: 18px;
height: 18px;
content: '';
display: inline-block;
}
However, if I assume you want to do it a different way, without updating the classes used in your HTML, then you would have to change your CSS selectors to look something like this:
span[data-icon="iphone"] {
background-image: url("../images/iphone_16x16.png");
width: 18px;
height: 18px;
content: '';
display: inline-block;
}
span[data-icon="mail"] {
background-image: url("../images/mail_16x16.png");
width: 18px;
height: 18px;
content: '';
display: inline-block;
}
You can also append the :after class to those selectors, but it isn't necessary.