3

Quiero hacer que los iconos no tengan apariencia de link, así están:

iconos con decoración de enlace

este es mi codigo en HTML:

<ul id="redesSociales">
  <a href="https://www.instagram.com/?hl=es-la" rel="nofollow target= _blank><li id="instagram"><i class="fab fa-instagram"></i></li>
  </a>
  <a href="https://www.facebook.com/"><li id="Facebook"><i class="fab fa-facebook-square"></i></li>
  </a>
  <a href="https://co.pinterest.com/"><li id="Pinterest"><i class="fab fa-pinterest-square"></i></li>
  </a>
</ul>

y este es el de CSS:

footer .footerWeb #instagram,
footer .footerWeb #Facebook,
footer .footerWeb #likedin,
footer .footerWeb #Pinterest {
  list-style: none;
  display: inline-flex;
}
1
  • 1
    el a ponelo dentro del li sino el browser te va a cambiar el html final para tener un dom coherente ( ul = lista sin orden, li = item de lista ) Commented el 20 oct. 2020 a las 21:58

4 respuestas 4

6

A todos tus elementos a agregales la propiedad text-decoration: none;

En tu css agrega lo siguiente:

a {
  text-decoration: none;
}

Fuentes:

text-decoration

3
  • el text-decoration lo pongo solo en css, o tambien en html ? @NikolaTesla Commented el 20 oct. 2020 a las 21:19
  • @JoséHernandez Las reglas css se deben declarar solo en tu archivo de estilos, mezclar css con HTML no es una buena práctica
    – user128299
    Commented el 20 oct. 2020 a las 21:24
  • Muchas gracias @BetaM Commented el 20 oct. 2020 a las 21:26
2

no te olvides de agregar a tu css

footer .footerWeb #instagram,
  footer .footerWeb #Facebook,
  footer .footerWeb #likedin,
  footer .footerWeb #Pinterest{
    list-style: none !important;
    display: inline-flex !important;
   }

El !important es por si tiene otro css que afecte los elementos

0
2

Puedes utilizar la propiedad de css

text-decoration: none;

Eso deberia quitarle el subrayado.

0
1

Podrías intentar esto. hace que todos los estados del link se vean de un mismo color, no importa si ya fueron visitados antes (morado), si el cursor está encima, etc.

a:link, :visited, :hover, :active{
    color: #fff;
}

Sino podrías especificar el hover si así lo deseás, obviamente. Ej:

a:hover{
    color: #000;
}
2
  • Normalmente son los pseudo-elementos los que llevan 2 puntos ::. hover no es un pseudo-elemento y se escribe con uno solo a:hover.
    – Mateo
    Commented el 2 may. 2023 a las 0:19
  • Sep, me di cuenta del error y vine a editarlo, gracias por aclararlo.
    – Jantdas
    Commented el 2 may. 2023 a las 1:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.