0

Estoy trasteando con CSS en mi portal web, donde tras mucho probar he conseguido aplicar estilos a los links externos con la siguiente regla sin necesidad de incluir condicionales y replaces en mi functions.php:

.entry-content a:not( [href*='miweb.com/'] ):after{
    font-family: "Font Awesome 5 Free";
    content: url('https://api.iconify.design/fa-solid:sign-out-alt.svg?height=16');
}

Ahora, me gustaría seguir aplicando estilos a los enlaces de correo para ponerles un icono de email.

¿Hay alguna forma de decirle a CSS que aplique una nueva regla cuando contenga mailto:?

1 respuesta 1

1

Podría funcionar lo siguiente:

CSS:

a[href^="mailto:"]:after{ 
  font-family: "Font Awesome 5 Free";
  content: url('https://api.iconify.design/fa-solid:sign-out-alt.svg height=16');
}
5
  • Gracias Victor. El editor me marca el uso de href^= como lento... ¿Esto tiene alguna repercusión negativa? ¿O es tan solo un aviso?
    – lk2_89
    Commented el 10 dic. 2019 a las 18:14
  • 1
    Realmente no. Me imagino que es porque el "content" hace la petición al icono de una URL externa. Commented el 10 dic. 2019 a las 18:21
  • Entiendo... La solución a poner el content con una url externa es porque no consigo mostrar ese icono con el código unicode, me pinta un cuadrado blanco.
    – lk2_89
    Commented el 10 dic. 2019 a las 18:23
  • 1
    Podrias colocar SVG directamente. Ya sea que los subos a una carpeta de tu proyecto y los llames. Esta web podria ayudarte materialdesignicons Commented el 10 dic. 2019 a las 18:27
  • No había caído en colocar el .svg directamente en mi web y lo llame desde ahí... ¡¡Thanks!!
    – lk2_89
    Commented el 10 dic. 2019 a las 18:55

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.