The (not so) official Kirby Icon Font

Kirby 2 Solutions šŸŽ‰
1

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

Pasted image583Ɨ591 12.1 KB

Pasted image900Ɨ598 303 KB

ā€¦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
2

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.

3

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: )

4

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:

5

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.