html - 满足媒体查询时将文本更改为图标

Question

我正在制作一个网站，当分辨率达到 640 像素或更低时，文本会变为图标。我想知道是否有一种方法可以使用 CSS 实现它，或者这是否更复杂并且应该使用 JQuery 或类似的东西？

这是我想做的事情的直观表示:

在满足媒体查询之前: http://4.ii.gl/mkcrfiLzq.png

媒体查询后: http://1.ii.gl/yed0kk0t6.png

任何帮助将不胜感激，最巧妙的解决方案将得到答案。

<div>
    <nav>
        <ul>
            <li><a><img src="images/LOGO.svg" height="44px" alt="Sandwich Express"/></a></li>
            <li><a href="index.html">Home<a></li>
            <li><a href="whatwedo.html">What We Do<a></li>
            <li><a href="oursandwiches">Our Sandwiches<a></li>
            <li><a href="contactus">Contact Us<a></li>
        </ul>
    </nav>
</div>

这是我要更改的横幅的 HTML，与之配对的 CSS 是:

 nav ul li a {
     display: block;
     margin-left: -40px;
     font-size: 20px;
     line-height: 44px;
     font-family: "Josefin Sans";
     text-align: center;
     text-decoration: none;
     color: white;
     padding: 0 20px 0 20px;
     background-color: black;
     -o-transition: .5s;
     -ms-transition: .5s;
     -moz-transition: .5s;
     -webkit-transition: .5s;
     transition: .5s;
}
 nav ul li a:hover {
     color: #CFCFCF;
}

我会发布任何其他需要的代码。

Answer 1

像这样尝试:

HTML

<div>
    <span class="text">text</span>
    <span class="icon"><img src="" /></span>
</div>

CSS

@media (min-width: 641px) {
    span.icon {display:none}
    span.text {display:inline-block}
}

@media (max-width: 640px) {
    span.icon {display:inline-block}
    span.text {display:none}
}

编辑(编码示例)

看看这个工作示例 CodePen