De texto a icono

[Radu]

¿Cómo puedo reemplazar el texto de la captura de pantalla con cualquier otro icono SVG (cualquiera) usando solo CSS?

¡Muy apreciado!

[NateDhaliwal]

Primero deberás cargar tu archivo SVG en la sección Cargas. Para el nombre de la variable SCSS, haz algo corto y conciso.
Luego, añade esto a la pestaña Común:

th.posts.sortable.num.topic-list-data {
  content: url($name-of-variable);
}

Ten en cuenta que no debes poner comillas dentro de los paréntesis de la url.

[Canapin (Coin-coin le Canapin)]

Don creó una herramienta auxiliar para usar iconos en CSS:

Discourse Easy 'SVG Icon' and 'Emoji' in CSS

Hello This topic contain two theme component. Discourse Easy SVG Icon CSS This theme component is functional as a template, please fork it on Github or use the code to your project. You can remove the icons svg codes from the SCSS and only keep those what you really actually use… I have imported the mixin file to the common.scss file so you can add your code below that line or separately to the desktop or mobile section. The theme component add the ability to keep the SVG…

[Radu]

Lo siento, no lo entiendo. ¿Qué quieres decir con $name-of-variable? Estoy intentando añadir un código SVG después de content:, y no funciona.

[Radu]

Mucha apreciación @Canapin, pero no estoy buscando instalar más componentes para cambiar la palabra “replies” con un código SVG.

[NateDhaliwal]

El nombre de la variable es el que introdujiste al subir el archivo SVG.

Necesitarás ser un administrador para hacer esto.

---

1. Ve a /admin en el foro.
2. En la barra lateral, elige Componentes en la sección Personalizaciones y crea uno nuevo.
3. Sube el archivo SVG en Cargas en la parte inferior de la página del componente.
4. Elige un nombre para la variable (en la ventana modal de carga de archivos)
5. Usa el código de mi publicación:

@NateDhaliwal

th.posts.sortable.num.topic-list-data {
  content: url($name-of-variable);
}

6. Reemplaza name-of-variable con el nombre que elegiste en el Paso 4. Mantén el $ antes del nombre de la variable.
7. ¡Listo!

[Radu]

Muchas gracias, ahora está muy claro.

Pregunta rápida: si tengo, digamos, 10 iconos, ¿tengo que subir los iconos uno por uno?

[NateDhaliwal]

Sí, creo que sí.

[NateDhaliwal]

@Radu En caso de que mi guía no funcione, puedes seguir esta guía, donde creo que solo puedes subir 1 archivo para múltiples iconos:

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[Radu]

Esta fue una gran publicación y me ayudó a reemplazar los íconos predeterminados. Una cosa más, si se me permite…

En lo siguiente, ¿cómo puedo poner un ícono de FontAwesome dentro de content?

th.topic-list-data.posts.num > span {
    visibility: hidden;
}

th.topic-list-data.posts.num > span:after {
    content:'un ícono de FontAwesome aquí';
    visibility: visible;
    display: inline-block;
    padding-bottom: 1.2em;
}

[NateDhaliwal]

Puedes descargarlo como SVG y luego hacer lo mismo. De lo contrario, tendrás que crear un componente, lo que será más complejo.

[Radu]

¿Entonces no hay forma de hacer algo como esto?

content:'fa d-icon d-icon-reply';

Si no es así, ¿cómo se vería el código para el siguiente método? Solo necesito un ejemplo de dónde empezar, porque intenté con CSS básico y no hay ningún efecto.

@NateDhaliwal

Puedes descargarlo como SVG y luego hacer lo mismo.

¡Agradezco tu ayuda!

[NateDhaliwal]

@Radu

content:'fa d-icon d-icon-reply';

No, pero puedes usar el mismo método que usaste con métodos anteriores. Súbelo y luego agrégalo como un archivo SVG que seguiste usando la guía;

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[NateDhaliwal]

@Radu

Si no, ¿cómo se vería el código para el siguiente método? Solo necesito un ejemplo de dónde empezar, porque probé CSS básico y no tiene ningún efecto.

No estoy muy seguro de dónde quieres colocar el icono. ¿Podrías enviar una captura de pantalla?
Gracias.

[Radu]

No importa dónde, solo quiero colocar un icono FA dentro de la línea content:'...'

Creo que usaré FA como familia de fuentes y Unicodes dentro del método content.

[NateDhaliwal]

Podrías hacer esto:

@NateDhaliwal

th.posts.sortable.num.topic-list-data {
  content: url($name-of-variable);
}

No estoy 100% seguro de si esto funciona, pero estoy bastante seguro de que sí.