Añadiendo iconos en lugar de texto

Contribuir UX
1

Este plugin es increíble: no soy bueno con los plugins, así que no sé cómo derivar de él por mi cuenta, pero siento que Discourse tiene un agradable aire de “simplicidad”; sería genial admitir imágenes/íconos.

Aquí hay una forma “ghetto” de cómo logré un ícono de Discord:

image
image281×100 5.1 KB

(Excepto por la saturación del color: los errores de capturas HDR son lo peor)

image

Después de instalarlo, crea un nuevo componente CSS o edita el tema directamente:

Esto es lo que usé:

.headerLink
{
    color: white;
    
    &.d
    {
        background-image: url('https://i.imgur.com/MSef433.png');
        background-repeat: no-repeat;
        background-size: 22px;
        
        a
        {
            color: rgba(0, 0, 0, 0);
            text-decoration: none;
            &:hover
            {
                box-shadow: 0px 2px lightgray;
            }
        }
    }
}
  • Tuve problemas con los efectos al pasar el cursor, así que una sombra inferior al hacer hover es lo mejor que pude lograr, ya que son imágenes en lugar de caracteres Unicode:

image

  • Nombré el ejemplo anterior d porque hay que llamarlo algo. Hice que la fuente tuviera una opacidad de 0, por lo que se oculta, pero d me permite utilizar la clase d.

  • ¿Hay una manera de hacer esto? Probablemente. Pero esta es la forma “ghetto” de introducir ideas hasta que algo mejor se revele :slight_smile:

2 Me gusta
2

En primer lugar, esto es un componente de tema, no un complemento. Es mejor especificarlo antes de que los usuarios se confundan e intenten instalarlo como un complemento.

La segunda cosa es: ¿por qué usas este componente de tema en lugar de Custom Header Links (icons), que sirve para agregar iconos al menú? :open_mouth:

6 Me gusta
3

¡Vaya, por eso no hice un componente! Todavía estoy aprendiendo los términos.

Supongo que no es lo suficientemente popular para aparecer en esa lista de componentes de instalación de enlaces perezosos ;D. Si los enlaces de texto deberían estar ahí, ¡también me gustaría que los iconos estuvieran! Se ve bastante increíble. Voy a revisarlo ahora.

EDITO: Funciona maravillosamente.

3 Me gusta