title: Responsive design: How can I hide icon labels for small viewports using only CSS?
body: <p>I'm working on a responsive layout using the <a href="http://foundation.zurb.com/" rel="nofollow noreferrer">ZURB Foundation</a> framework.</p>
  
  <p>I've added some icons (icon font spans) next to the text on a navigation bar, and here's what I would like to happen:</p>
  
  <p>When the viewport is not wide enough to display all the navigation items on one line, the text labels for <em>only the items that would cascade to the next line</em> should be hidden and the font-size (icon size) for that item should be increased to a new fixed value.</p>
  
  <p>I'm attaching 3 images (I just cheated with chrome inspector) to demonstrate what I'm looking for.</p>
  
  <p>Is this possible without JavaScript? If so, how?</p>
  
  <p><img src="https://i.stack.imgur.com/4QBYN.png" alt="Fullscreen"></p>
  
  <p><img src="https://i.stack.imgur.com/qyNSa.png" alt="Windowed"></p>
  
  <p><img src="https://i.stack.imgur.com/6IcOw.png" alt="Mobile"></p>