Titres du menu affichés avec icône ou remplacés par icône sur pts

Bonjour,
Je "développe" un child-theme wordpress (basé sur twentyfourteen), à voir ici et je suis parvenu à insérer des icônes dans les titres du menu principal.

J'aimerais que seules les icônes s'affichent quand l'écran fait entre 781px et 1024px de large pour gagner de la place.

Quand l'écran fait moins de 781px, le menu est remplacé par un toggle qui fonctionne plus ou moins bien. Quand l'écran fait plus de 1024px, les icônes et les textes occupent également bien l'espace.

Voici ce que j'ai en css pour les boutons:

 
.headersolbutton::before {
    background: rgba(255, 255, 255, 1) url("http://tst.allwewish.org/wp-content/themes/twentyfourteen-child/images/AWWSpriteImgs.png") repeat scroll 0 -344px;
    border: 2px solid #0b3293;
    border-radius: 36px;
    content: "";
    float: left;
    height: 36px;
    margin: 16px 0 0 -2px;
    position: absolute;
    width: 36px;
}
.headerwisbutton::before{
background: rgba(255, 255, 255, 1) url("http://tst.allwewish.org/wp-content/themes/twentyfourteen-child/images/AWWSpriteImgs.png") repeat scroll 0 -1487px;
    border: 2px solid #0b3293;
    border-radius: 36px;
    content: "";
    float: left;
    height: 36px;
    margin: 16px 0 0 -2px;
    position: absolute;
    width: 36px;
}

.headersolbutton a, .headerwisbutton a{
    border: 2px solid #0b3293;
    border-radius: 2px;
    font-family: Lato,sans serif;
    height: 28px !important;
    line-height: 28px !important;
    margin: 20px 5px 5px;
    padding: 0 0 0 25px;
    text-align: center;
    text-transform: uppercase;
    transition: width 0.7s ease 0s;
    width: 200px;
	font-size: 13px;
background-color:#0b3293;
}
.headersolbutton a:hover, .headerwisbutton a:hover{
	background-color:#e5007e;
	color:#fff;
	font-size: 13px;
	border:2px solid #e5007e;
}

J'utilise des @mediascreen pour adapter le style, mais encore rien pour ces deux boutons.

Et voici un extrait de mon header:

<div id="page" class="hfeed site">
	<div class="site-title">


		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
	</div>


	<div class="header-logo">
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><div class="logo"></div></a>
		<p>Rassemble les v&oelig;ux et les solutions</p>
	</div>
	<div class="search-toggle">
		<a href="#search-container" class="screen-reader-text"><?php _e( 'Je voeu', 'twentyfourteen' ); ?></a>
	</div>	
<div class="loader" id="loader">
	<div class="patext">Un peu de patience...</div>
	<div class="patience"></div>
</div>
<header id="masthead" role="banner" class="site-header">
		<div class="header-main">
				
			<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<div id="topsearch"> 

<?php get_search_form(); ?>


</div>

			<button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>

					<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>

<?php 
    if ( is_single() ) {
			wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) );
    } else {
			wp_nav_menu (array( 'theme_location' => 'MainLight', 'menu_class' => 'nav-menu' ) ); 
}
?>

			</nav>

		</div>

		<div id="search-container" class="search-box-wrapper hide">
			<div class="search-box">
	
   <ul>
      <?php
      if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-6') ) :
      endif; ?>
   </ul>

			</div>
		</div>
	</header><!-- #masthead -->

J'ai essayé de diminuer la taille du texte dans firebug pour le caché derrière l'icône mais le lien ne fonctionne plus et je ne suis pas certain que ggl apprécie la manoeuvre. Il ya certainement une technique plus propre... mais je ne l'ai pas trouvée sur le web, ni en français ni en anglais.
J'espère que l'un de vous pourra m'aider.

Mille mercis d'avance,

Tche
Modifié par Tche111 (11 Apr 2016 - 20:46)

un petit up