Having issues with icons/custom modules

[Brittle73]

Hello, thanks for taking a look at this.

I am having a lot of issues trying to get Waybar to look/function as I want it to. I'm learning some CSS throughout the process, but hitting some roadblocks that I haven't been able to figure out, even after attempting to follow the Wiki/instructions relatively closely.

My main issue right now is that I can't seem to get icons working correctly... I have poured through hours of articles/Git issues and have tried installing Font Awesome in TTF and OTF, tried Nerd Fonts, tried to get rid of anything that might conflict, although I am hitting a point where I don't really know where to go from here. I was using Font Manager to copy icons directly into my config from the main Font Awesome folder and managed to get some actually working, but others not. Then yesterday I forgot that I am still learning CSS and decided it would be a good idea to try and clean up the formatting of my config... and blew it up. I'm a ding dong... I will be making more frequent backups from here on out. Fortunately I had one from a couple of weeks ago, so I didn't have to start from the ground up, but now I am having issues getting the icons I did have working back up, and can't figure out how to add custom modules, even just something static and dumb. I have tried formatting things the same way as others that have been successful for me and even trying to copy other peoples' modules and haven't been as successful as I hoped. Most of the config was copied from the default and/or another user whose config I found somewhere, I honestly don't remember and learned to start putting links in my code now :). My bad. It's starting to frustrate me to a point of not finding as much enjoyment and satisfaction from figuring things out, and I'd like to break that cycle.

I was hoping someone could take a look at my configs and possibly point me in the right direction(s). I am on using Waybar on Sway on a Surface 6 Pro with Arch. I managed to get nwgbar, a partial tray, moved things around, and several regular modules up and working, however I do not have icons for some of them. I did notice that the default config has "FontAwesome" is listed as the first font in the default style.css code, but am confused since it sounds like the formatting now should be "Font Awesome 6 Free" or similar. And then looking through other users' configs I see some not at all using Font Awesome, so I am very confused and could use some straightening out before I overthink this more and blow my dang configs up again. Please :)

Config and style.css (NOT using V1, just the config file, not super familiar with posting standards on GH yet, sorry): https://github.com/Brittle73/waybar

THANK YOU

[schauveau]

I just configured my own waybar recently so I understand you frustration. Working with fonts can be annoying. I had good results with the nerd fonts since they contain a lot of icons (including everything from Font Awesome).

By the way, you do not need to specify all the fonts. I am using font-family: Hack Nerd Font. When a symbol is not found, css will search in the other fonts installed on the system.

I just downloaded FontAwesome 6 and their family name is effectively something like "Font Awesome 6 Free". However, I also have the version 5 provided by debian package and its family is "FontAwesome".

I also installed Symbola and Noto Color Emoji for the emojis (https://unicode.org/emoji/charts/full-emoji-list.html)

For symbols that exist both in color and monochrome, it is possible to use the \uFE0E and \uFE0F unicode variation selectors. For example, 🔊\uFE0E should draw a monochrome speaker while 🔊\uFE0F will use the color version (typically from Noto Color Emoji)

I wrote the following script to list all fonts providing a character:

#!/bin/bash

# Convert the text into a list a hexadecimal codepoints 
A=( $(echo -n "$1" | iconv -f utf8 -t utf32be  | xxd -p | sed 's/\(........\)/\1 /g' ) )


for cp in "${A[@]}" ; do
    echo "# CHARACTER $cp"
    fc-list ":charset=$cp"  --format "%-50{family} / %-20{style} = '%{file}'\n"
done

[schauveau]

And I have an optimized custom script to display the volume from pipewire/wireplumber in https://gist.github.com/schauveau/b5a2d20c98e6bea8c8cd50410ff01253

Read the comments carefully. They contain a lot of useful information.

If you know how to write bash scripts then this is a good starting point to create your own custom modules. Replace everything inside the while snore loop by something that prints a SINGLE LINE OF TEXT.

[Brittle73]

And I have an optimized custom script to display the volume from pipewire/wireplumber in https://gist.github.com/schauveau/b5a2d20c98e6bea8c8cd50410ff01253

Read the comments carefully. They contain a lot of useful information.

If you know how to write bash scripts then this is a good starting point to create your own custom modules. Replace everything inside the while snore loop by something that prints a SINGLE LINE OF TEXT.

Thank you. I will come back to this, but for now I having FAR less issues with nwg-panel and am working with it. I liked the aesthetic customization of Waybar, but nwg will let me use SVG files so I KNOW I have the icon I want and am not having to fuss with figuring out which font is overriding Nerd and/or Font Awesome. I may come back this though, and would still like the answer if someone has it.

Thank you for your suggestion! :)

[Alexays]

Closing in favor of #215 and #1330