Ability to define font family for the icons

Great bar, thanks for your work!

Atm your bar support icons from fontawesome project.
This carry many problems with weird fallbacks which depends on the font set installed by the user (to my knowledge) (I've seen several issues about fontawesome missing/mispatched fonts etc.).
Is it possible/hard to implement the possibility for the user to select a different font for the icons?

I know that this can be performed by using the pango markup as in:
"your character"
but the configuration will become uite unreadable.
Edit: typo
Edit2: closed and reopened by mistake

You can make it (kinda) work setting your font like this in style.css :

* {
font-family: Roboto, "Font Awesome 5 Pro Solid", "Font Awesome 5 Brands";
}

Obviously you have to replace with the fonts you want. The problem with this is that some characters, for instance the "Clock" in FA5, render as a ~ in text fonts, and because CSS tests fonts from left to right, Roboto is used to display it.

Maybe there is a way to target only the icon with a selector like #clock .icon. I've tried this one, and it does not work.

I think this is more of a bug, if you set the {icon} placeholder to the left of text with a space in between, the space gets rendered with the icons font, and at least "Material Design Icons" font doesn't have the space glyph (0x0020), so a weird placeholder glyph shows up.

Had also issues with some icons not showing up. I tinkered a while until I found out, that my AUR package ttf-ms-fonts (Arial probably) "overwrote" some glyps (volume-up, down for example).

I tried the suggestion above (put FontAwesome in styles.css). It works, but for me all other characters were now slightly different and colons were misplaced. Not as pretty as before.

I uninstalled ttf-ms-fonts now, and all icons and fonts are as expected.

@Alexays

@Alexays and @dtnmr

Does Waybar support his style? For example:

@font-face
{
  font-family: "Twemoji";
  font-style: "normal";
  font-weight: "normal";
  src: url("../../.local/share/fonts/Emoji e ícones/Twitter Colour Emoji.ttf") format("truetype");
}

#custom-flag
{
  font-family: "Twemoji", sans-serif;
}

I want to set this font to the specific module, while I keep JoyPixels as system emoji font. I prefer the non-wavy rectangle flag (Twitter Color Emoji) instead of rounded flag (JoyPixels) and of wavy flag (Apple Color Emoji and Noto Emoji).

I second this. It would be great if all icons were wrapped in ... by default. That way we could explicitly set which font to use for an icon and not have to rely on complicated font fallback behavior.

@gusbemacbe

Yes, @gusbemacbe were you able to get a module specific font-family to work?
For me it only seems to pick the main one and ignores the module specific one.

@gusbemacbe

Yes, @gusbemacbe were you able to get a module specific font-family to work?
For me it only seems to pick the main one and ignores the module specific one.

I have tested it a dozen times, but it didn't work. It captures still rounded flags of JoyPixels instead of rectangular flags of Twemoji. I uninstalled JoyPixels and Noto Emoji fonts, left only Twemoji font, and the emojis in that module ended up being tofu.

I second this. It would be great if all icons were wrapped in ... by default. That way we could explicitly set which font to use for an icon and not have to rely on complicated font fallback behavior.

Was this ever opened/implemented?

Pango markup doesn’t support ..., so I came up with another workaround: wrapping all icons in the Waybar config in ... and adding a font “alias” into font-config /etc/fonts/local.conf:

<fontconfig>
  ...
  <alias>
    <family>icon</family>
    <prefer>
      <family>Font Awesome 5 Free</family>
    </prefer>
  </alias>
</fontconfig>

Which font family should cover "", "", "", "", "", "", "", "", ""? Is it Symbols Nerd Font?

Which font family should cover "", "", "", "", "", "", "", "", ""? Is it Symbols Nerd Font?

Font Awesome, apparently, but I'm not able to find the corresponding package in Ubuntu repo.

Which font family should cover "", "", "", "", "", "", "", "", ""? Is it Symbols Nerd Font?

Install firacode-nerdfont also helpful

Any news or solution on this?
even if it's a really dumb fix I would rather go for it

Any news or solution on this? even if it's a really dumb fix I would rather go for it

I just simply fix it by install fontawesome(6.1.1) and setting font-family: 'Font Awesome 6 Free'; at style.css.

I'm using the piece:

* {
  font-family: "Symbols Nerd Font", "LXGW WenKai";
  font-size: 14px;
}

I'll recommend "Symbols Nerd Font" which does not include ascii characters and has many more symbols beyond fontawesome, the next candidate fonts will be used for regular characters.

I use Inter font with Nerd fonts Symbols for the icons and summing with not using mono fonts for GUIs/Interface (waybar for example), I'm having no problems anymore. So I can change from Inter to Iosevka, Cantarell, Fira Sans or any non-monospaced one.

{
all: unset;
font-size: 16px;
font-family: "Inter Variable", "Symbols Nerd Font";
font-feature-settings: '"zero", "tnum", "ss01", "ss02", "ss03", "cv01", "cv05", "cv08", "cv10", "cv11", "cpsp", "case"';
font-weight: 700;
}

Font Awesome, apparently, but I'm not able to find the corresponding package in Ubuntu repo.

This is because the package is called fonts-font-awesome on Ubuntu and only covers fonts in Font Awesome 4, not 5 or 6. The Ubuntu package is outdated. Try manually installing the font or try looking for a better supported icon font for your distro and replacing the unicodes yourself. In most cases I believe so long as your icon font is installed properly you should be able to use CTRL+SHIFT+U to enter a unicode character corresponding to the font icon you want. I edit from the kitty terminal using neovim and it works flawlessly this way, and provides several ways to search from within the terminal.

Would it be better to use 'real' icons instead of font glyphs? As it will follow XDG Icon Theme Specification and it will match currently used system icon theme?
I made a discussion thread #4713 check it out

Navigation Menu

Repository navigation

Ability to define font family for the icons #215

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Ability to define font family for the icons #215

Description

Activity

cinghiopinghio commented on Mar 13, 2019

dtnmr commented on Mar 13, 2019

severoraz commented on Jul 14, 2019

cryptoluks commented on Dec 7, 2019

gusbemacbe commented on Feb 10, 2021

Hubro commented on Jul 25, 2021

nnuel commented on Jan 15, 2022

gusbemacbe commented on Jan 15, 2022

mrshmllow commented on Apr 17, 2022

jirutka commented on May 1, 2022

adamant-pwn commented on Nov 28, 2022

mlazzarotto commented on Feb 1, 2023

xz-dev commented on Aug 21, 2023

iceeburr commented on Dec 10, 2023

xz-dev commented on Dec 10, 2023

rtgiskard commented on May 8, 2024

msmafra commented on Feb 5, 2025

D34D4L1V3 commented on May 2, 2025

oisanjaya commented on Dec 24, 2025

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions