KX FontPack

The KerbalX Font Pack is a set of scalable icons (glyphicons) for use in web projects.

It's currently just a selection from free font-packs Icomoon and FontAwesome, but I hope to get KSP players to contribute to it so we can build up a set of KSP related icons. Some of these are used on KerbalX, and my aim is to build up a pack that will be helpful to anyone building KSP related projects.

Font Options
Font Size
Font Color
Glyphicons are icons presented as a font rather than as image files. This enables them to be resized to any size while remaining clear with crisp edges, just by changing the font size with CSS. You can apply any CSS property to them, use transition and animation effects etc, making them very convenient for web development. Change the font options above to see.

I need people (or kerbals) who have skills in creating SVG vector images and could create some KSP related icons.

At the moment pretty much any anything KSP related would be helpful. But in particular an icon for a Kerbal (think silhouette of Jeb), icons for the SPH and VAB, and for the different craft types would be great.

If you have any submissions come and post on the KSP forum thread

Download Font Pack

The font-pack is licenced under the CC 4.0 licence agreement
How to use
  • In the zip you'll find a fonts folder containing .eot, .svg, .ttf and .woff files. Put all of these into your project's font asset folder (in Rails put them in app/assets/fonts).
  • Copy the style.css file into your css assets folder and rename it to whatever you like (in Rails put it in app/assets/stylesheets and require it in application.css).
  • If you're awesome and use SASS then change the extension to .scss (and in rails use font-url instead of url, or just use this scss file instead of style.css)
  • the css/scss file defines a base class kxicon which uses the font pack as its font-family, and a class for each icon which adds the appropriate content for it.
  • Just create an element with the class kxicon and the class for which ever icon you want ie <div class='kxicon kx-rocket'></div> (mouse over each icon below to see their class names)