search

Alexays / Waybar

Highly customizable Wayland bar for Sway and Wlroots based compositors. :v: :tada:
MIT License
5.92k stars 667 forks source link

Different style for icon #1119

Open SuperBo opened 3 years ago

SuperBo commented 3 years ago

I try to mimic this theme in way bar https://raw.githubusercontent.com/adi1090x/files/master/polybar-themes/previews/blocks/main.gif.

However, I don't know how to style Icon different versus the text.

Does waybar support this option?

soyuz2012 commented 3 years ago

I'm not sure that it's good solution, but you can try to create 2 different modules (one for icon and one for text), e.g. network and network#text.

rYR79435 commented 3 years ago

You can wrap your icon in a <span> and set a background attribute on it, like this:

"format": "{temperatureC}°C <span background=\"#f00\">{icon}</span>"

which results in: 20210620_11h31m48s_grim

It's a bit of a hack, since you're now styling from the config file and not the style.css. But you can nonetheless achieve what you're trying to do. Btw. something like class="icon" won't work, because class is not valid pango markup. See valid attributes here

SuperBo commented 3 years ago

yeah, thank you all. But I think it's a little hacky. I think waybar should provide us a official way to style icon in style.css.

frogamic commented 2 years ago

I agree, I don't think hardcoding the styles for icons in configuration is a viable solution. It would be difficult to allow styling "icons" specifically when you are able to put a fontawesome glyph anywhere in the format string though. It really is a shame pango spans cannot have classes.

ashish-kus commented 1 year ago 
"backlight": {
                 "device": "intel_backlight",
                 "format": "{icon}",
                 "tooltip-format": "盛{Percentage}%",
                 "format-icons": ["", "", "", "", "" ],
                 "on-scroll-up" : "light -A 1",
                 "on-scroll-down" : "light -U 1"
             },

This is my backlight module, now what should i do to increase the size of icon in format. Kindly help.

LukashonakV commented 1 year ago

Hi @ashish-kus , Try this

"backlight": {
                 "device": "intel_backlight",
                 "format": "<span size='9pt'>{icon}</span>",
                 "tooltip-format": "盛{Percentage}%",
                 "format-icons": ["", "", "", "", "" ],
                 "on-scroll-up" : "light -A 1",
                 "on-scroll-down" : "light -U 1"
             },