Intentando usar CSS para insertar iconos PNG en cuadros de etiquetas

Soporte
1

¡Hola! Estoy intentando usar un conjunto de iconos PNG para las etiquetas en mi foro. He logrado que encajen en la caja de la etiqueta y se vean bien, pero esto afecta a todas las cajas de etiquetas. He encontrado cómo seleccionar etiquetas específicas, pero ¿cuál sería la forma correcta de seleccionar esa caja de etiqueta específica para insertar el icono PNG? ¡Cualquier ayuda sería genial!

Intentando seleccionar una sola:

.tag-question::before {
    content: url(https://s2.coinmarketcap.com/static/img/coins/16x16/1.png);
    width: 8px;
    height: 4px;
    margin-right: 10px;
    margin-top: 3px;
    display:inline-block;
}

Seleccionando todas:

a.discourse-tag.box::before {
    content: url(https://s2.coinmarketcap.com/static/img/coins/16x16/1.png);
    width: 8px;
    height: 4px;
    margin-right: 10px;
    margin-top: 3px;
    display:inline-block;
}
2

¿Por qué no usar glifos SVG en lugar de PNGs? Hay un componente para esto en Tag Icons

3

Ya estaba intentando eso, pero con lo que estoy tratando de hacer, necesitaría convertir más de 400 iconos PNG a SVG y luego convertir todo eso en un sprite SVG. Según lo que he probado y leído, no hay una forma rápida ni buena de convertirlos manteniendo la calidad del PNG original. Probé con un icono varias veces, pero la calidad solía disminuir, y luego, al incluirlo en un sprite, no lograba que se cargara con el componente del tema.

4

Puedes usar el selector de atributos CSS.

Aquí tienes un ejemplo con la etiqueta de pregunta:

a.discourse-tag.box[href*="question"]::before {

Con 400 etiquetas, es posible que necesites usar algo diferente a [href*= para algunos elementos. Existen algunas alternativas para activar el elemento de atributo.

4 Me gusta
5

¡Ah, gracias! :grinning: Esto debería funcionar genial con lo que estoy intentando hacer.

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.