How to add .png/.jpg/.svg icons to waybar

I had been looking around how to add the dragon icon in dr460nized as my nwg-drawer’s launcher. A lot of looking around told me waybar doesn’t have an explicit option to do this but you can still use the style.css file to get around this. I tried a bunch of available .css online but nothing worked. Except this,

I looked at this person’s comment to achieve my goal. This was just a lot of looking around so I posted it here in case someone else wants to do it they don’t need to be needlessly frustrated.

Just remember to use the absolute path to the image like /home/user/foo/bar/image.jpg and not something like ~/foo/bar/image.png, ~ is understood by shell not by anything else.

For the sake of completeness,

~/.config/waybar/config

"custom/launcher": {
        //"format":"<U+F44E>",
        "format":"    ",
        "tooltip": false,
        "on-click": "exec nwg-drawer -c 7 -is 70 -spacing 23",
     },

The spaces are necessary they determine the width your icon is allowed to take we are setting it as this empty text’s background.
~/.config/waybar/style.css

#custom-launcher{
        font-size: 20px;
        background-image: url('/home/siddharth/.config/waybar/dr460nized-start.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
}

SGS’s dragon logo → https://gitlab.com/uploads/-/system/project/avatar/23323742/dr460nized-start.png
The image has no background which makes this more easy. Thankyou SGS. You saved me the pain of looking around for css to remove background afterwords. :rofl:

On another note,

bind = ,122, exec, pamixer --decrease 5; notify-send "<U+F1120> Volume: "$(pamixer --get-volume) -t 500
bind = ,123, exec, pamixer --increase 5; notify-send "<U+F1120> Volume: "$(pamixer --get-volume) -t 500
bind = ,121, exec, pamixer --toggle-mute; notify-send "<U+F0581> Volume: Toggle-mute" -t 500
bind = ,XF86AudioMicMute, exec, pactl set-source-mute @DEFAULT_SOURCE@ toggle; notify-send "System Mic: Toggle-mute" -t 500

I would like to suggest keybinding volume inc/dec. keys to pamixer instead of pactl. The reason is simple pactl just doesn’t stop at 100% it keeps going to infinity and beyond. A very stupid way of accidentally ruining your speakers according to me.
I left mic mute/unmute to pactl because it does this job better than pamixer.

Edit: apologies sgs I have fixed the comment, :slightly_smiling_face:

3 Likes

Great, I had already searched for it and found my Hamburg icon to be the best. :smiley:

Nico does a lot, a lot, actually too much :slight_smile:
but he doesn’t make any icons. But I made this for Nico :blush:

We take care of the health of our users, so let’s keep it that way.
Everyone can change it as they like :slight_smile:

2 Likes

Sorry SGS didn’t know that. :sweat: Thanks for pointing it out.

That’s true.

1 Like

This one too,
image
another user steel it :wink: to use it as his avatar.

Have a look :wink:

5 Likes

Great work @NaN :slight_smile:

Now I must work on a better icon (SVG) :smiley:
Also remove the line under the icon.

That is good.


Done :smiley:

Better.

1 Like

Didn’t I see @sammiev just the other day? Somewhere?

They say the knees are the second thing old age robs you of.

1 Like

First the hair, then the knees.

2 Likes

I forgot to add…I literally forgot, which proves the point. I guess.

They say the knees are the second thing old age robs you of.
I can’t remember the first.

That should make better sense.

What that has to do with icons & waybar eludes me. I guess that’s.just.one.more.thing. :reminder_ribbon:

2 Likes

To be fair your work is very cool. I can understand the itch to surround yourself with beautiful and cool stuff. :grin:

Uff that just sounds painful. :Shiver:

1 Like

Woah! is stealing allowed?
I’m not allowing anyone to steal my pfp :no_entry_sign: (with it being specially made by you :smiling_face_with_three_hearts:)

3 Likes

Thank you NaN ! Always wanted to have a dragon in that corner
waybar_dragon

3 Likes

That’s not firedragon in KDE dr460nized, isn’t it? :smiley: