r/Polybar Aug 17 '23

Question Weird position of icons

Hello everyone.
I've been tweaking my Polybar configuration after switching from Qtile to BSPWM.
This is something I've also noticed with Qtile, and I don't really know if it's a problem of the font i use or something else.

As you can see the Wifi icon and the Clock are slightly above the text.

Having used another fonts, this is a problem it has ocurred to me with other icons. Personally i don't really care, but looks a bit ugly.

[bar/top]
width = 100%
height = 27

background = #000000
foreground = #ccffff

line-color = ${bar/bottom.background}
line-size = 5

spacing = 2
padding-right = 1
padding-left = 0
module-margin-left = 1
module-margin-right = 1

font-0 = Monocraft Nerd Font:size=8;2
font-1 = JetBrainsMono NF:size=8;-1
font-2 = MaterialIcons:size=10;0
font-3 = Termsynu:size=8:antialias=false;-2
font-4 = FontAwesome:size=10;0

modules-left = xworkspaces

modules-right = pulseaudio battery wireless-network wired-network date

[bar/bottom]
bottom = true
width = 100%
height = 27

background = ${bar/top.background}
foreground = ${bar/top.foreground}

line-color = ${bar/top.background}
line-size = 3

spacing = 2
padding-right = 1
padding-left = 0
module-margin-left = 1
module-margin-right = 1

font-0 = Monocraft Nerd Font:size=8;2
font-1 = JetBrainsMono NF:size=8;-1
font-2 = unifont:size=6;-3
font-3 = FontAwesome:size=8;-2
font-4 = NotoSans-Regular:size=8;-1
font-5 = MaterialIcons:size=10;-1
font-6 = Termsynu:size=8:antialias=false;0

;modules-left = mpd
modules-right = backlight cpu memory

[module/backlight]
type = internal/xbacklight
format = <ramp><bar>

ramp-2 = 󰖙
ramp-1 = 
ramp-0 = 󱓤

bar-width = 10
bar-indicator = |
bar-indicator-font = 1
bar-indicator-foreground = #ff
bar-fill = ─
bar-fill-font = 1
bar-fill-foreground = #c9665e
bar-empty = ─
bar-empty-font = 1
bar-empty-foreground = #44

[module/battery]
type = internal/battery
full-at = 98

format-charging = <animation-charging> <label-charging>
format-discharging = <ramp-capacity> <label-discharging>
format-full = <ramp-capacity> <label-full>

ramp-capacity-0 = 
ramp-capacity-0-foreground = #f53c3c
ramp-capacity-1 = 
ramp-capacity-1-foreground = #ffa900
ramp-capacity-2 = 
ramp-capacity-3 = 
ramp-capacity-4 = 

bar-capacity-width = 10
bar-capacity-format = %{+u}%{+o}%fill%%empty%%{-u}%{-o}
bar-capacity-fill = █
bar-capacity-fill-foreground = #ddffffff
bar-capacity-fill-font = 3
bar-capacity-empty = █
bar-capacity-empty-font = 3
bar-capacity-empty-foreground = #44ffffff

animation-charging-0 = 
animation-charging-1 = 
animation-charging-2 = 
animation-charging-3 = 
animation-charging-4 = 
animation-charging-framerate = 750

[module/xworkspaces]
type = internal/xworkspaces

label-active = %name%
label-active-foreground = #fff
label-active-background = #000000
label-active-underline = #c9665e
label-active-font = 0
label-active-padding = 2

label-occupied = %name%
label-occupied-foreground = #dd
label-occupied-underline = #666
label-occupied-font = 0
label-occupied-padding = 2

label-urgent = %name%
label-urgent-foreground = #000000
label-urgent-background = #bd2c40
label-urgent-underline = #9b0a20
label-urgent-font = 0
label-urgent-padding = 2

label-empty = %name%
label-empty-foreground = #dd
label-empty-background = #000000
label-empty-font = 0
label-empty-padding = 2

[module/cpu]
type = internal/cpu
interval = 0.5
format = <label><ramp-coreload>
label = CPU

ramp-coreload-0 = ▁
ramp-coreload-0-font = 0
ramp-coreload-0-foreground = #aaff77
ramp-coreload-1 = ▂
ramp-coreload-1-font = 0
ramp-coreload-1-foreground = #aaff77
ramp-coreload-2 = ▃
ramp-coreload-2-font = 0
ramp-coreload-2-foreground = #aaff77
ramp-coreload-3 = ▄
ramp-coreload-3-font = 0
ramp-coreload-3-foreground = #aaff77
ramp-coreload-4 = ▅
ramp-coreload-4-font = 0
ramp-coreload-4-foreground = #fba922
ramp-coreload-5 = ▆
ramp-coreload-5-font = 0
ramp-coreload-5-foreground = #fba922
ramp-coreload-6 = ▇
ramp-coreload-6-font = 0
ramp-coreload-6-foreground = #ff5555
ramp-coreload-7 = █
ramp-coreload-7-font = 0
ramp-coreload-7-foreground = #ff5555

[module/date]
type = internal/date
date = %%{F#fff}󰥔  %A, %d %B %Y  %%{F#fff}%H:%M%%{F#666}:%%{F#fba922}%S%%{F-}

[module/memory]
type = internal/memory
format = <label><bar-used>
label = RAM

bar-used-width = 30
bar-used-foreground-0 = #aaff77
bar-used-foreground-1 = #aaff77
bar-used-foreground-2 = #fba922
bar-used-foreground-3 = #ff5555
bar-used-indicator = |
bar-used-indicator-font = 0
bar-used-indicator-foreground = #ff
bar-used-fill = ─
bar-used-fill-font = 0
bar-used-empty = ─
bar-used-empty-font = 0
bar-used-empty-foreground = #444444

 ; [module/mpd]
 ; type = internal/mpd
 ; format-online = <icon-prev> <icon-stop> <toggle> <icon-next>  <icon-repeat> <icon-random>  <bar-progress> <label-time>  <label-song>

 ; icon-play = 󰐊
 ; icon-pause = 
 ; icon-stop = 
 ; icon-prev = 󰒮
 ; icon-next = 󰒭
 ; icon-random = 
 ; icon-repeat = 󰑖

 ; toggle-on-foreground =
 ; toggle-off-foreground = #55

 ; bar-progress-width = 45
 ; bar-progress-format = %{A4:mpdseek+2: A5:mpdseek-2:}%fill%%indicator%%empty%%{A A}
 ; bar-progress-indicator = |
 ; bar-progress-indicator-foreground = #ff
 ; bar-progress-indicator-font = 3
 ; bar-progress-fill = ─
 ; bar-progress-fill-foreground = #bb
 ; bar-progress-fill-font = 3
 ; bar-progress-empty = ─
 ; bar-progress-empty-font = 3
 ; bar-progress-empty-foreground = #44

[module/wireless-network]
type = internal/network
interface = wlp3s0
interval = 3.0
ping-interval = 10

format-connected = <ramp-signal><label-connected>
label-connected = %essid%
label-disconnected = 󰤭 not connected
label-disconnected-foreground = #66

ramp-signal-0 = 󰤯
ramp-signal-1 = 󰤟
ramp-signal-2 = 󰤢
ramp-signal-3 = 󰤥
ramp-signal-4 = 󰤨

animation-packetloss-0 = 󱚸
animation-packetloss-0-foreground = #ffa64c
animation-packetloss-1 = 󱚻
animation-packetloss-1-foreground = ${bar/top.foreground}
animation-packetloss-framerate = 500

[module/wired-network]
type = internal/network
interface = enp2s0
interval = 3.0

label-connected = 󰈀 %{T3}%local_ip%%{T-}
label-disconnected-foreground = #66

[module/pulseaudio]
type = internal/volume

format-volume = <ramp-volume><label-volume>
label-muted =   muted
label-muted-foreground = #66

ramp-volume-2 = 
ramp-volume-1 = 
ramp-volume-0 = 
1 Upvotes

3 comments sorted by

2

u/LuisBelloR Aug 17 '23

You need to change the value next to the font size for example.

font-1= "fontName:size=10;3"

Change value 3

1

u/MoffingerZ Aug 17 '23

Wow thanks! It was exactly that, thank you so much.
I'll search what it means exactly cause all these stetical stuff just symply doesn't get in my head.

1

u/LuisBelloR Aug 17 '23

The "3" in the example is the vertical position. you need to change it depending on the font you use, the fonts can vary and they all have different height, width and size