Transform Icons

[georgev93]

I'm trying to get my CPU core graph to be a bit skinnier. I'm using the unicode "eighth bar" icons to display usage of each core, but I'm finding that the icons are a bit wide. I've tried font-stretch and have had no luck. I'm thinking it might be because the icons are not being treated as regular text. I've noticed on this page that there is a -gtk-icon-transform property that seems like it could work if I apply a scaleX(0.5) transform to the icons. However, I'm a CSS noob and have no idea to apply this -gtk-icon-theme property to the CPU display.

Here's what I'm working with:

// config
* {
    font-size: 16px;
    font-family: monospace;
}

#cpu {
        background: #1a1a1a;
    color: #859900;
    padding: 0 10px;
}

/* style.css */
    "cpu": {
        "interval": 1,
        "format": "{icon0}{icon1}{icon2}{icon3}{icon4}{icon5}{icon6}{icon7}{icon8}{icon9}{icon10}{icon11}{icon12}{icon13}{icon14}{icon15}{icon16}{icon17}{icon18}{icon19}",
        "format-icons": ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"],
    },

[RobertMueller2]

I don't think gtk icon styling applies here, after all, it's still text and not images. What sorta works, is this:

* {
    font-size: 16px;
}

#cpu {
        background: #1a1a1a;
    color: #859900;
    padding: 0 10px;
}

but I can't see any difference applying font-stretch to monospace. The best suggestion I have is to look for a font where the eighths are already condensed (I don't have any suggestion for that) and then add span tags around the icons in the format property, like this:

        "format": "<span font_family=\"SomeVeryCondensedFont\">{icon0}{icon1}{icon2}{icon3}{icon4}{icon5}{icon6}{icon7}{icon8}{icon9}{icon10}{icon11}{icon12}{icon13}{icon14}{icon15}{icon16}{icon17}{icon18}{icon19}</span>",