Hello :wave: This topic contain two theme component. Discourse Easy SVG Icon CSS :warning: 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 icon a maintainable and easily editable in your CSS. The component contains the all svg icons found here: discourse/vendor/assets/svg-icons/fontawesome at main · discourse/discourse · GitHub https://github.com/VaperinaDEV/discourse-easy-svg-icon-css How to use? Fix parameters: $icon-set: brands, regular, solid $icon-name: icon name $icon-color: icon color (currentColor, hex or color variable) $width and $height: the size of the added icon It looks like this: @include svg-icon($icon-set, $icon-name, $icon-color, $width, $height); Using currentColor Here is an example to adding a solid rocket icon before the Latest navigation bar item. #navigation-bar { li.nav-item { &_latest { a { gap: 0.5em; &:before { content: ""; @include svg-icon(solid, rocket, currentColor, 1em, 1em); } } } } } [add-icon-to-latest] Using var(--gold) color variable Here is an example to add a regular gold star icon before the Top navigation bar item. #navigation-bar { li.nav-item { &_top { a { gap: 0.5em; &:before { content: ""; @include svg-icon(regular, star, var(--gold), 1em, 1em); } } } } } [add-star-to-top] We can easily change the icon set, the color or even the icon too on hover etc… Let’s see! Now we change the regular icon to solid when I hover the button. #navigation-bar { li.nav-item { &_top { a { gap: 0.5em; &:hover, &:focus, &.active { &:before { @include svg-icon(solid, star, currentColor, 1em, 1em); } } &:before { content: ""; @include svg-icon(regular, star, currentColor, 1em, 1em); } } } } } [change-icon-set] Discourse Easy Emoji CSS :warning: This theme component is functional as a template, please fork it on Github or use the code to your project. 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. https://github.com/VaperinaDEV/discourse-easy-emoji-css How to use? The usage is similar like the SVG version. Fix parameters: $emoji-set: apple, google, twitter, win10, google_classic, facebook_messenger $emoji-name: emoji name $width and $height: the size of the added emoji @include emoji($emoji-set, $emoji-name, $width, $height); Here is an example to adding a facebook_messenger rocket emoji before the Latest and a twitter star emoji before the Top navigation bar item. #navigation-bar { li.nav-item { &_latest { a { gap: 0.5em; &:before { content: ""; @include emoji(facebook_messenger, rocket, 1em, 1em); } } } &_top { a { gap: 0.5em; &:before { content: ""; @include emoji(twitter, star, 1em, 1em); } } } } } [Screenshot 2024-03-25 at 5.26.26]

Good Morning @Don, I have been ardently following your work and believe I have incorporated all your creations into my forum. However, with this particular item, I am uncertain. Since the upgrade of the discourse, my mind has become muddled, and I cannot recall where to implement these CSS codes. I have integrated your GitHub code into the theme, yet nothing appears to be showing.

[imagem] Aaron Walsh: I have integrated your GitHub code into the theme I believe the theme is supposed to be an editable base for you to work from: [imagem] Don: This theme component is functional as a template, please fork it on Github or use the code to your project. Which would explain why nothing showed up when you installed it, as the template would likely do little to nothing on it’s own.

[imagem] Firepup Sixfifty: I believe the theme is supposed to be an editable base for you to work from: [Screenshot_20240325_115532_Chrome] Shouldn’t this be visible to us? [Screenshot_20240325_115729_Chrome] or [Screenshot_20240325_120045_Chrome]

No, as it is a remote theme, meaning you must either download it from GitHub and upload as a zip to your instance, or fork the GitHub repository and make your changes there.

Indeed, this is an entirely novel concept to me. However, I comprehend your point; each day is an opportunity for learning, and I appreciate the swift response.

Hey @Aaron_Walsh :waving_hand: Did it work finally for you? Is there any specific use case where you want to use this? If you share some details I can make a separate theme component based on this where it can easily modifiable with settings.

Good Morning, The endeavor would have been successful; however, I no longer possess a Windows laptop for editing purposes. Instead, I have transitioned to using a Samsung Galaxy S9 Ultra, a decision I now find somewhat regrettable :sweat_smile:. There exists a method through which I can accomplish this task using my hosting server (cPanel) by uploading and editing. Nevertheless, I must apologetically note that the work you have crafted may prove to be intricate for some individuals. Therefore, if you are amenable, [imagem] Don: Should you provide some details, I am capable of creating a distinct theme component based on this. It would be designed for ease of modification through settings. [9e9f0a12fb60537533c141e18e145f7d98eecb9c] This design is the object of my admiration and the one I am particularly drawn to!

[imagem] Aaron Walsh: Nevertheless, I must apologetically note that the work you have crafted may prove to be intricate for some individuals. Yeah, that’s the reason it placed in #dev category but no worries I’ll make a #theme-component for this use case. :slightly_smiling_face:

[imagem] Don: Yeah, that’s the reason it placed in #dev category Apologies, that was my oversight! However, moving forward, I will be better informed about this.

Hello :waving_hand: This #theme-component is done. :white_check_mark: [imagem] Discourse Nav Item Icon / Emoji Theme component information_source Summary Add Icon / Emoji before nav item hammer_and_wrench Repository GitHub - VaperinaDEV/discourse-nav-item-icon-emoji: Add Icon / Emoji before nav item · GitHub question Install Guide How to install a theme or theme component open_book New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Hello wave With this theme component you can add icon or emoji before nav items. The theme component based o…

Discourse Fácil 'Ícone SVG' e 'Emoji' em CSS

Dev

Don 27 Março , 2024 05:54 11

Olá Este componente de tema de personalização está pronto.

Tópico		Respostas	Vistas
Discourse Nav Item Icon / Emoji Theme component	10	960	21 Agosto , 2024
Introducing Font Awesome 5 and SVG icons Announcements new-feature	131	44921	1 Dezembro , 2023
Add Sidebar support "Discourse Icon" & more Feature doc-categories	5	271	9 Julho , 2025
Replace Discourse's default SVG icons with custom icons in a theme Developer Guides how-to , theme-guides	10	9538	24 Fevereiro , 2026
Discourse Icon Theme component official , discourse-icon	19	5758	13 Dezembro , 2024

Discourse Fácil 'Ícone SVG' e 'Emoji' em CSS

Related topics