The (not so) official Kirby Icon Font

Since Font Awesome doesn’t have a Kirby icon, I decided to create an Kirby icon-font myself.



…the Kirby app I’m working on… I needed the icon for this project (see upper left corner)


BTW. The reason I decided to make an icon-font, is because the .SVG-variant is not commonly supported, yet…

I need the icon for a simple Kirby app (smartphone / tablet) and I’m (also) targeting all Android 4.x devices (and Windows Phone - which uses the Trident render-engine).

So I guess a font-icon is best supported trough all devices :slight_smile:

6 Likes

Looks like a fun project - I love to experiment and dive deep into things like that myself.

But I just want to highlight a couple of things, to clear your points up a bit.

Your statement about SVG not being “commonly supported” is simply not true, in fact SVG is supported by ~96.43% of all browsers in global use today, which caniuse.com (that you’re linking to) also clearly says.

The neat thing about an font filled with icons (icon font) is that you’re able to “sprite” many smaller icons into a single file in a Retina and HDPI display -friendly vector format. Spriting might actually be considered an anti-pattern for performance when using HTTP/2, which will gain serious momentum in adoption from now and over the next couple of years.

Hi,

In my user-case .SVG is not possible; my app is aiming Android 4.x devices and Windows Phone and both have issues with .SVG rendering;

  • WP does not scale it right (without a ‘proper’ browser hack).
  • Android 4.0.x / 4.1.x doesn’t show any (decent) image at all.

And since the majority of Android users use the 4.x branch - I decided to support all versions, even the 4.0.x branche (why not - 4.0 is basically the same as 4.4 - beside some weird API’s (and .SVG support!)).

That’s why I decided to create an icon font, also because it can be merged easier in the Font Awesome Icon, which I forked already).

Another ‘cool’ thing about the font is that I can manipulate it with DOM / jQuery more easily (animation, interactive hovering, etc…).

And since my app has all the assets saved in the isolated / local storage - HTTP/2 is not really an issue.

So unfortunately - the .SVG is not an option (well, I did create a .SVG version - but also a base64 encoded one, just to create a complete package :wink: )

Aargh I just assumed you meant a web app :blush:

Icons font aren’t bad, I once spend some days making one, only containing the letters in my company name in that custom logo font I was using, so that I could easily and semantically write it on my websites, it was a fun challenge with kerning and line-height (or X or Y-something I think it’s called in typography) :+1:

Hi,

Sorry - I meant a ‘smartphone’ app (well, all apps are apps!) - but it also runs on all tablets and x86 / amd64 processor devices.

It is web-based (I used bare-bone Cordova to create them - skipping the Phonegapp wrapper - for performance reasons), so I can create a (Kirby) app with just one codebase for all major platforms.

The app itself is extreme simple; just fun to made - I will post the source and download-store-links here, once ready.