Show/hide icon labels using media queries. Demo: http://terkel.jp/demo/responsive-icon-label/demo.html

responsive-icon-label.js

/**
 * Show/hide icon labels using media queries.
 *
 * @param {Object}  images     NodeList of icon images
 * @param {String}  mqString   Media query string
 * @param {Boolean} [fallback] Show label text for no-media-queries browsers
 * @example
 *     var navIcons = document.querySelectorAll('nav img');
 *     responsiveIconLabel(navIcons, '(min-width: 801px)', true);
 */
function responsiveIconLabel (images, mqString, fallback) {

    var mqSupported = window.matchMedia && window.matchMedia('only all').matches,
        textTemplate = document.createElement('span'),
        mql,
        mqListeners = [],
        i,
        len;

    textTemplate.className = 'text';

    for (i = 0, len = images.length; i < len; i++) {
        (function (img) {
            var alt = img.alt,
                txt = textTemplate.cloneNode(false);
            img.parentNode.insertBefore(txt, img.nextSibling);
            if (mqSupported) {
                mqListeners.push(swapAltText);
            } else if (fallback) {
                swapAltText(true);
            }
            function swapAltText (match) {
                if (match) {
                    img.alt = '';
                    txt.innerHTML = alt;
                } else {
                    img.alt = alt;
                    txt.innerHTML = '';
                }
            }
        })(images[i]);
    }

    if (mqSupported) {
        mql = window.matchMedia(mqString);
        mql.addListener(updateIconLabel);
        updateIconLabel(mql);
    }

    function updateIconLabel (mql) {
        var i,
            len,
            match = mql.matches;
        for (i = 0, len = images.length; i < len; i++) {
            mqListeners[i](match);
        }
    }
}