Ability to define font family for the icons

[cinghiopinghio]

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?

[cinghiopinghio]

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

[dtnmr]

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.

[severoraz]

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.

[cryptoluks]

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.

[gusbemacbe]

@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).

[Hubro]

I second this. It would be great if all icons were wrapped in <span class="icon">...</span> 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.

[nnuel]

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.

[mrshmllow]

I second this. It would be great if all icons were wrapped in <span class="icon">...</span> 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?

[jirutka]

Pango markup doesn’t support <span class="icon">...</span>, so I came up with another workaround: wrapping all icons in the Waybar config in <span font='icon'>...</span> 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>