Как сделать такое адаптивное меню?

Question

[sacred1]

Всем почти уже доброе утро!Вопрос заключается вот в чем.Есть сайт,в нем меню состоит из иконок + текста (например иконка "дома" c текстом "главная")все просто. Для адаптивности меню,естественно использую media-queries,но не знаю как реализовать задуманное,а именно : при уменьшение экрана браузера связка иконка+текст переходит = > просто в иконку,тобишь при маленьких размерах окна браузера у нас остаются одни иконки.Получается надо удалить как то nodeValue в текстовом узле используя js?но это как то уж слишком хард-корно,должны быть еще варианты.Заранее спасибо!
Вид дерево при этом будет такой

<nav>
 <ul>
  <li>
   <i></i><a href="#">Главная</a>
  </li>
   .........
 </ul>
</nav>

Answer 1

[Rsa97]

<ul class='menu'>
    <li>IMAGE<span class='menuText'> Текст</span>
    ...
</ul>

media screen and (max-width:299px) {
    .menuText { display: none; }
}

Почему-то редактор в коде @ съедает.

Comments

[sacred1]

я дерево своего меню опубликовал в вопросе*..Так конечно хорошо получается с этим атрибутом display,но в данном случаи если я уберу текст в теге соответственно самой ссылки не будет

[sacred1]

как то надо обернуть и иконку,получается

[Rsa97]

Конечно

<li><a href="#"><img src="..."><span class='menuText'> Текст</span></a>

Answer 2

[Abc Edc]

На событие resize вешай чтобы эти два элемента как вариант становились невидимыми это в jQuery по моему блабла.hide() выглядит а тот элемент который при загрузке окна браузера типа исходный он был тоже .hide() предположим резко становится видимы в гугле введи там есть обратная .hide