CSS Ocultar texto pero ¿mostrar imagen?

Necesito cambiar algo sin tocar los códigos HTML.CSS Ocultar texto pero ¿mostrar imagen?

así que tengo este código HTML en mi

     <span class="share"> 
          <ul> 
           <li>Share &nbsp;&nbsp;</li> 
           <li class="twitter"><a href="#">twitter</a></li> 
           <li class="facebook"><a href="#">facebook</a></li> 
           <li class="delicious"><a href="#">delicious</a></li> 
           <li class="friendfeed"><a href="#">friendfeed</a></li> 
           <li class="addthis"><a href="#">share</a></li> 
           <div class="clear"></div> 
          </ul> 
         </span>

y esto en el CSS

  .twitter {background:url('../images/tt.png') no-repeat; width:10px; height:14px; }

Esto funciona bien, pero el texto de twitter es visible bajo la insignia del gorjeo, yo no quiero los textos para aparecer en mi lista, quiero reemplazarlos con imágenes en CSS.

¿Es posible prescindir de los códigos HTML?

Fuente

2011-08-08 Tumay

Aquí: https://jsfiddle.net/hetr1whg/ –

Haga que el texto sea transparente. Ya que es un enlace, tendrá que utilizar unos selectores para asegurarse de que se tratan todos los casos:

.twitter a, .twitter a:link, .twitter a:visited 
{ 
    color: transparent; 
}

Editar: Esta otra opción, mientras que más detallado, tiene la ventaja de mantener la frontera de enfoque (los pequeños puntos que aparecen cuando se selecciona un enlace) al tamaño y la forma del ícono de Twitter. Además, el texto no se revelará si se selecciona, copia y pega. Se vuelve invisible e inelegible. Aquí es la técnica:

.twitter a { 
    display: inline-block; 
    overflow: hidden; 
    width: 0; 
    height: 14px; 
    padding-left: 10px; 
}

Fuente

2011-08-08 00:06:58 gilly3

El texto es seleccionable y los anchos varían, tengo como 5 enlaces de marcadores sociales uno al lado del otro, quiero que sus almohadillas sean iguales. – Tumay

@Tumay - Es curioso, mi edición llegó en un segundo después de su comentario y parece abordar su comentario perfectamente. :) – gilly3

¡el segundo método funciona como un encanto! Muchas gracias :) – Tumay

Usted podría utilizar text-indent:

text-indent: -9999px; /* get rid of any text */

Fuente

2011-08-08 00:07:07

Eso mueve el enlace también. El ícono de Twitter deja de aparecer. – gilly3

-1

que posiblemente consiguiera su pregunta equivocada. Pero quieres ocultar el texto. Yo usaría jQuery, sin embargo, recuerde que su <a> perderá masa.

<script> 
    $('.twitter a').html(''); 
</script>

Fuente

2011-08-08 00:20:02

uso de texto-guión con un poco de magia en ella :)

HTML:

  <span class="share"> 
       <ul> 
        <li>Share &nbsp;&nbsp;</li> 
        <li class="twitter"><a href="#" class="twitter">twitter</a></li> 
        <li class="facebook"><a href="#">facebook</a></li> 
        <li class="delicious"><a href="#">delicious</a></li> 
        <li class="friendfeed"><a href="#">friendfeed</a></li> 
        <li class="addthis"><a href="#">share</a></li> 
        <div class="clear"></div> 
       </ul> 
      </span>

CSS:

a.twitter { 
    background-image:url('../images/tt.png'); 
    display:block; 
    height:58px; 
    text-indent:-9999px; 
    width:200px; 
}

por lo que ver el texto está sangrado, pero la imagen sigue siendo Se puede hacer clic porque he puesto una clase en el enlace de twitter;)

Fuente

2011-08-08 01:49:15 Zhianc

Intente hacer su font-size : 0px; en su CSS.

Fuente

2014-02-25 07:26:09 Thiyagesh

CSS Ocultar texto pero ¿mostrar imagen?

Respuesta

Cuestiones relacionadas