Adding your custom font to i3status

Notice: This is a guide for an old version of my i3status. To access the guide to the newer version click here.

Now that I have created my custom icon font. I would like to add this font to my i3status. This will be a challenge since before I was able to use a css selector to add my icon. I cannot use css selectors in my i3status config. However, if you look at the css file generated with your font located in:

~/svgimages/app/assets/stylesheets/IconicIcons.css

1
2
3
4
.icon-arch:before 
{ 
content: "\f100"; 
}

You can see the each icon has its own unique unicode sequence.

Add the font to your font cache

Now that you have the ttf file for your font. You can now add it to you font cache.

1
2
3
mkdir ~/.local/share/fonts
cp *.ttf ~/.local/share/fonts
fc-cache -fv

Now you should add the custom font into the i3status config located in:

~/.i3/config

And edit the font line to contain your font.

1
font pango:Source Sans Pro, IconicIcons 11

After that you can then add the icon in the status messages in your i3status.conf located in:

~/.i3/i3status.conf

1
2
3
4
5
6
7
8
9
10
11
tztime local {
        format = " %a %m-%d-%y %l:%M:%S %p"
}

load {
        format = " %1min"
}

disk "/" {
	format = "/: %free"
}

I decided to put the arch logo in front of the / disk. To insert unicode into the file in vim you just need to:

ctrl + v + u + unicodesequence
so for the Arch icon it would be:
ctrl + v + u + f100
After that, all you need to do is refresh i3 by:
ctrl + shift + r
Now, sit back and admire your icons on your i3status bar! Here is picture of my i3 status. To view the full screen image click here.



Here is a close up picture of the icon on my i3 status. To view the full screen image click here.