如何将文本更改为图像（不工作？）

Question

这里我有我的代码，其中的想法是响应，当用户在小型设备上显示文本时，需要更改为图像。然而，目前没有文字显示，图像就在那里，无论网页的宽度实际上是什么？

<div class="navmenu">         
<div id="social-nav">
<ul id="social-navigation">
<li><div class="facebookbox"><a href="http://www.facebook.com/" target="_blank" alt="Facebook"><center><strong>Like on</strong><div class="facebookicon">Facebook</div></center></a></div></li>
</ul>           
</div>
</div>

这是CSS

.facebookicon {font-size: 42px;}

@media only screen and (max-width: 500px) {
    .facebookicon {background-image: url('IMAGE');
                   background-size: 100%;
                   width: 40px;
                   padding-top: 40px;
                   height: 0;
                   text-indent: -9999px;
    }
}