Soporte » Diseño – Temas y plantillas » Focus iconos Font Awesome

  • buenos días

    en el sitio web, abajo a la derecha, hay unos iconos de font awesome que llevan a las redes sociales, etc.

    me gustaría modificar su focus para que pudieran ser seleccionados con el teclado y que se volvieran de color azul claro (como pasa con su hover)

    cómo se podría hacer?

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 4 respuestas - de la 1 a la 4 (de un total de 4)
  • Hola @masantosmeca

    En el CSS que se encarga de cambiar el color cuando esta en hover (:hover), tienes que añadir el focus (:focus).

    Viendo tu codigo, yo lo simplificaria utilizando una class en el p donde tienes todos los enlaces, por ejemplo:

    
    p.social-links a:hover, p.social-links a:focus { color: #66a7ff }
    

    Saludos

    Iniciador del debate masantosmeca

    (@masantosmeca)

    no ha funcionado en cuanto a la selección con el teclado, parece que en ese caso selecciona el fondo del icono (con una outline) ¿?

    Hola @masantosmeca

    Por lo que veo tienes definido tanto en a como en i el color, por lo tanto deberia funcionarte lo siguiente:

    
    p.social-links a:hover, 
    p.social-links a:focus,
    p.social-links a:focus-visible,
    p.social-links a:hover i, 
    p.social-links a:focus i,
    p.social-links a:focus-visible i { 
        color: #66a7ff;
        outline: none; /** Elimina el outline */ 
    }
    

    Las tres primaras son para definir el color del enlace y las otras tres para que el i (icono) tenga el mismo color.

    El foco se hace en elemento a solamente pero como tambien tienes definido un color para i es necesario especificarlo.

    Iniciador del debate masantosmeca

    (@masantosmeca)

    he probado con eso y con:

    p.social-links a:hover, 
    p.social-links a:focus,
    p.social-links a:focus-visible,
    p.social-links a:hover i, 
    p.social-links a:focus i,
    p.social-links a:focus-visible i {
    	color: #66a7ff !important;
    	outline: none !important;
    }

    pero sigue igual ¿?

Viendo 4 respuestas - de la 1 a la 4 (de un total de 4)
  • Debes estar registrado para responder a este debate.