Telerik blogs

Computing has a long and sordid history with icons. They aren't images, they're icons. Different platforms have supported different resolutions and different formats throughout the years. I remember when it was a big deal for Windows Vista to add support for large 256 x 256 pixel icons for high resolutions displays. I personally have had an on-again off-again love affair with icons over the years. If you know me, you know how much I love UI, but how terrible I am at design. I've talked about this many many times. This often times sent me on the hunt for custom icons in the far reaching corners of the internet where I more often than not found some piece of spyware instead of a fresh look for my recycle bin. What's worse, I think I even installed an icon editor a time or too to try and build my own. I wish someone had been there in those days to kindly look me in the eyes and say, "No Burke. Just don't."

Icons are everywhere, and the web is definately no exception. We've accomplished this in a variety of ways through the years based on browser support.

CSS Sprite Sheets

One technique is to use CSS Sprite Sheets. This is a giant image that contains all of your individual icons. CSS is then used to set that giant image as the background for an element, and the position the background right over the correct place in the large image to show just the smaller one. You have no doubt seen this before. Usually the CSS looks a little something like this...

Sample CSS Sprite Sheet Class

background-image:url('../img/image2.gif')
#nav li a.item2 {background-position:0px -143px;}

Source: CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Kendo UI Web uses CSS Sprite Sheets for it's icons. Sprite sheets are great because it's just a large image, and virtualy all browsers can display images without issue. They also can be pre-loaded and used almost instantly when the page is ready.

One downside to sprite sheets is that they can get quite large and end up forcing the browser to consume large amounts of RAM. You also have to keep multiple sprite sheets if you are handling element state (i.e. :hover).

Another option is to use SVG.

SVG Icons

SVG is a graphical markup language that gained quite a bit of popularity as a standard during the HTML5 "revolution" if you will. It's got varying support across mobile devices (except Android 2.3 and below) and desktop browsers (except IE 8 and below). SVG is a way of creating images with markup, just as the name implies.

The advantage of SVG over images is that it's vector instead of raster. This means that the computer is drawing the image using lines, shapes and curves; not simply lighting up a grid of pixels like it does for raster images. Consequently, vector graphics can be scaled up or down without any loss of fidelity. Another advantange of SVG Icons is that since they are composed of markup, they are incredibly easy to manipulate.

A downside of SVG icons is that they are not nearly as easy to colorize on the fly since they are composed of markup, each element having it's own style.

Font Icons

The latest incarnation of icons on the web is as custom fonts. Custom fonts have been around and supported on the web for a very long time, but we spent many years fumbling over how to license fonts for use on the web and trying to figure out which format to use. Remember Wing Dings? That's an icon font. Just a really bad one.

Since a browser can scale typography without issue, it can scale font icons as well. Not only that, font icons are significantly smaller than their SVG counterparts since they don't require all the markup.

Font icons are really easy to colorize, but you are really restricted to using only one color, there is no support for alpha transparency. Even so, font icons are becoming more and more prominant as the icon strategy of choice - especially on mobile.

Kendo UI Mobile Built-In Icon Font

Kendo UI Mobile ships with its own icon font. If you were to examine the contents of the styles/images folder, you would see two different font files, KendoUI.ttf and KendoUI.woff. Both of those are font files, just in different formats. The woff format is supported on iOS 5 and later and Android. The ttf gets you support for Android all the way back to 2.2, as well as most other platforms. Kendo UI uses this icon font to display the icons that are included in Kendo UI Mobile by default.

For instance, you may create a simple application and have a few buttons across the bottom in a Kendo UI Mobile TabStrip...

Each of the icons in the footer is specified with a data-icon element. Additionally, the icon in the button on the header is specified the same way inside the button element. These are some of the default Kendo UI Mobile Icons. But how exactly does this work?

Pseudo Elements

Kendo UI Mobile creates icons for these data-icon attributes using something called 'pseudo elements'. Pseudo elements are a part of the CSS specification that allows you to create phony elements with CSS and then add content to them. Let's look at how Kendo UI Mobile does this with the above example. The Kendo UI Mobile Tabstrip markup looks like this..

Tabstrip Markup

<div data-role="tabstrip">
  <a href="#home" data-icon="home">Home</a>
  <a href="#home" data-icon="info">Info</a>
  <a href="#home" data-icon="settings">Settings</a>
  <a href="#home" data-icon="favorites">Favorites</a>
</div>

When the application is actually rendered, Kendo UI Mobile mutates that markup in the following way...

Rendered Tabstrip Markup

<div data-role="tabstrip" class="km-tabstrip">
  <a href="#home" data-icon="home" class="km-button km-state-active" data-role="tab">
    <span class="km-icon km-home"></span>
    <span class="km-text">Home</span>
  </a>
  <a href="#home" data-icon="info" class="km-button" data-role="tab">
    <span class="km-icon km-info"></span>
    <span class="km-text">Info</span>
  </a>
  <a href="#home" data-icon="settings" class="km-button" data-role="tab">
    <span class="km-icon km-settings"></span>
    <span class="km-text">Settings</span>
  </a>
  <a href="#home" data-icon="favorites" class="km-button" data-role="tab">
    <span class="km-icon km-favorites"></span>
    <span class="km-text">Favorites</span></a>
</div>

Do you see what happened? For each anchor element with a data-icon attribute, Kendo UI Mobile added in 2 spans: 1 to contain the icon and the other to contain the text. It then used the:after CSS pseudo elements to add the icon content to the span. For instance, the Home anchor becomes an anchor containing two span's; one has the text and the other a km-icon km-home class. The 'km-icon:after' pseudo element holds the home icon which is displayed inside of the second span. The pseudo elements themselves are not visible in your browser dev tools. Only their contents are.

But what if the icons included in Kendo UI Mobile aren't enough? What if you need more selection? Greater variety.  Actually, Kendo UI Mobile includes quite a few icons.  Over 300 to be exact.

However, these icons are not available by default in order to keep the size of the Kendo UI Mobile CSS as small as possible.  The good news is that you can extend Kendo UI Mobile to support any of these additional icons you want by using a little bit of CSS.

Specifying A New Icon

<style>
    .km-arrow-e:after,
    .km-arrow-e:before
    {
        content: "\e000";
    }
</style>

This CSS defines a new arrow-e icon and uses the aforementioned Pseudo Elements to define the content of that element as being the Unicode character that maps to icon.  You can see in the list of icons above that each and every icon has it's Unicode equivalent listed below the icon.

Now all you need to do is to use the icon just like you would normally with a data-icon attribute.

Using A Newly Defined Mobile Icon

<a href="#next" data-icon="arrow-e"></a>

Over 300 icons is a lot, but it may not contain the specific icon that you need. Perhaps you would love to have the Twitter Icon displayed in your application in places where a user can share content. How can you tie into what Kendo UI Mobile is doing to specify your own custom icons?

First off, you are going to need an awesome icon font. I have just the one.

Introducing Font Awesome

FontAwesome is a free icon font that is generally used with Twitter Bootstrap. It contains 361 fantastic icons and is free to use just about anywhere. And the best part is, it works GREAT with Kendo UI Mobile! Lets look at how you can add these icons in and use them in your Kendo UI Mobile projects.

Font Awesome Installation

Font Awesome comes in a handy download that contains four folders. Of these, you really only need the font folder, but I recommend including the css folder as well so you can use Font Awesome everywhere in your project, not just inside Kendo UI Mobile Widgets.

Include both folders in your project and then just add a reference to css/font-awesome.min.css. You're now ready to start using Font Awesome using <i> tags.

Using Straight Font Awesome Icons

You can use a Font Awesome icon anywhere by just using an <i> tag and setting it's class appropriately. Font Awesome's site lists all the icons and all of the classes that you need to use an icon. For instance, if I wanted to use a Twitter icon inside of my Kendo UI Mobile view, I just need to enter the following markup...

Twitter Font Awesome Icon

<i class="icon-twitter"></a>

That's it! Majically, you now have a Twitter icon. Want to increase the size of the icon? Just put it in a header tag.

Put Icon In An H1 To Make It Big

<h1><i class="icon-twitter"></i></h1>

If that's not big enough for you, just increase the font size. Want it a different color? CSS baby! I cranked this one up to 10em and made it "Twitter Blue" using CSS.

Using Font Awesome With Kendo UI Mobile Widgets

Unfortunately, this same strategy will not work with Kendo UI Mobile widget icons. Kendo UI Mobile actually appends a pseudo element to widgets like tabstrip buttons to display the icon. The good news is that you can extend Kendo UI Mobile to support whichever Font Awesome icon you want using a little bit of CSS.

First, we are going to tell Kendo UI Mobile to use Font Awesome when it finds any .km-icon class. This class gets automatically added by Kendo UI Mobile when a data-icon is specified. That km-icon class should be inside an element with a class of fa (for Font Awesome). This is so the Font Awesome icons don't clobber the Kendo UI ones. This CSS should be in your custom stylesheet and should come AFTER your Kendo UI Mobile style declaration.

Tell Kendo UI Mobile To Use Font Awesome

.fa .km-icon:after,
.fa .km-icon:before
{
    font: 1em/1em 'FontAwesome';
}

Now before we can use any of Font Awesome's icons, we need to tell Kendo UI about it. Lets take the Twitter Icon for example. We need to know it's Unicode value. Where do we find that? The Font Awesome cheat sheet of course! It contains all of the icons, their classes and their Unicode equivalents.

If you search that page for "twitter", you will see there are actually TWO Twitter icons in Font Awesome. I told you it was awesome! For the icon-twitter icon, the Unicode value is F099. There are a bunch of other characters in there, but that's for HTML encoding. CSS only needs the straight unicode value with a preceding \. We can now create a custom icon class and assign this unicode value as the content.

Define A Custom Twitter Icon

.km-twitter:after,
.km-twitter:before {
  content: "\F099";
}

Now how do we use it? Easy. We just add an fa class to our Tabstrip button and then a `data-role='twitter'...

Using The Custom Icon

<div data-role="tabstrip">
  <a href="#home" class="fa" data-icon="twitter">Home</a>
  <a href="#home" data-icon="info">Info</a>
  <a href="#home" data-icon="settings">Settings</a>
  <a href="#home" data-icon="favorites">Favorites</a>
</div>

Notice how we are using Font Awesome icons right alongside Kendo UI's own, and everything just works. The Twitter icon gets a blue gradient when selected like every other icon does. Beautiful.

A Note About Windows Phone

Shockingly, Windows Phone does not reliably support the @font-face CSS attribute. Feel free to read through that SO thread or set me straight in the comments here, but it appears that it has more to do with Windows Phone 8 not handling the remotely hosted font file. People have reported success with embedded fonts. Kendo UI Mobile handles it by falling back to a good ole fashioned sprite sheet for Windows Phone.

Font Awesome With Kendo UI Mobile Is AWESOME

I love to use icons in my applications, and Font Awesome has an icon for virtually every occasion. It often has two as we previously saw. Grab a copy of Kendo UI Mobile, a Font Awesome download and see how easy it is to create your own custom icons. It's a lot of fun!

Special thanks to Kamen Bundev from the Kendo UI Mobile team for his review and input on this article.

About the Author
is a web developer living in Nashville, TN. He enjoys working with and meeting developers who are building mobile apps with jQuery / HTML5 and loves to hack on social API's. Burke works for Telerik as a Developer Advocate focusing on Kendo UI. Burke is @burkeholland on Twitter.


Comments

Comments are disabled in preview mode.