De texte à icône

[Radu]

Comment puis-je remplacer le texte de la capture d’écran par une autre icône SVG (n’importe laquelle) en utilisant uniquement CSS ?

Merci beaucoup !

[NateDhaliwal]

Vous devrez d’abord téléverser votre fichier SVG dans la section Téléversements. Pour le nom de la variable SCSS, faites quelque chose de court et de concis.
Ensuite, ajoutez ceci à l’onglet Common :

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

Notez que vous ne devez pas mettre de guillemets dans les parenthèses de l’URL.

[Canapin (Coin-coin le Canapin)]

Don a créé un outil d’aide pour utiliser des icônes 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]

Je suis désolé, je ne comprends pas. Que voulez-vous dire par $name-of-variable ? J’essaie d’ajouter un code SVG après content:, et cela ne fonctionne pas.

[Radu]

Merci beaucoup @Canapin, mais je ne cherche pas à installer plus de composants pour changer le mot « replies » avec un code SVG.

[NateDhaliwal]

Le nom de la variable est celui que vous avez saisi lors du téléchargement du fichier SVG.

Vous devrez être administrateur pour faire cela.

---

1. Allez sur /admin sur le forum.
2. Dans la barre latérale, choisissez Composants dans la section Personnalisation et créez-en un nouveau.
3. Téléchargez le fichier SVG sous Téléchargements en bas de la page du composant.
4. Choisissez un nom pour la variable (dans la fenêtre modale de téléchargement de fichier)
5. Utilisez le code de mon message :

@NateDhaliwal

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

6. Remplacez name-of-variable par le nom que vous avez choisi à l’étape 4. Gardez le $ avant le nom de la variable.
7. C’est bon !

[Radu]

Merci beaucoup, c’est très clair maintenant.

Petite question : Si j’ai disons 10 icônes, dois-je télécharger les icônes une par une ?

[NateDhaliwal]

Oui, je crois que oui.

[NateDhaliwal]

@Radu Si mon guide ne fonctionne pas, vous pouvez suivre ce guide, où je pense que vous pouvez simplement télécharger 1 fichier pour plusieurs icônes :

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]

C’était un excellent article et il m’a aidé à remplacer les icônes par défaut. Encore une chose si je peux…

Dans ce qui suit, comment puis-je mettre une icône FontAwesome à l’intérieur de content ?

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

th.topic-list-data.posts.num > span:after {
    content:'une icône FontAwesome ici';
    visibility: visible;
    display: inline-block;
    padding-bottom: 1.2em;
}

[NateDhaliwal]

Vous pouvez le télécharger en SVG, puis faire la même chose. Sinon, vous devrez créer un composant, ce qui sera plus complexe.

[Radu]

Il n’y a donc aucun moyen de faire quelque chose comme ça ?

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

Sinon, à quoi ressemblerait le code pour la méthode suivante ? J’ai juste besoin d’un exemple pour commencer, car j’ai essayé le CSS de base et il n’y a aucun effet.

@NateDhaliwal

Vous pouvez le télécharger en SVG et faire la même chose.

Merci d’avance !

[NateDhaliwal]

@Radu

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

Non, mais vous pouvez utiliser la même méthode que vous avez utilisée avec les méthodes précédentes. Téléchargez-le, puis ajoutez-le en tant que fichier SVG que vous avez suivi en utilisant le guide ;

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

Sinon, à quoi ressemblerait le code pour la méthode suivante ? J’ai juste besoin d’un exemple pour commencer, car j’ai essayé du CSS de base et cela n’a eu aucun effet.

Je ne suis pas trop sûr de l’endroit où vous voulez placer l’icône. Pourriez-vous envoyer une capture d’écran ?
Merci.

[Radu]

Peu importe où, je veux juste placer une icône FA à l’intérieur de la ligne content:'...'

Je pense que j’opterai pour FA comme famille de polices et des Unicodes à l’intérieur de la méthode content.

[NateDhaliwal]

Vous pourriez faire ceci :

@NateDhaliwal

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

Je ne suis pas sûr à 100 % que cela fonctionne, mais je suis tout à fait sûr que oui.

[system (system) A fermé ce sujet ()]

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