Applying custom icon set with font-face

[Tim]

Hi 

I have been trying to apply a custom icon set using .woff and .ttf files built using fontello.  I have followed the tutorial  from here:

http://webcache.googleusercontent.com/search?q=cache:http://docs.kendoui.com/getting-started/mobile/icons

but i cannot get things to work.  When my app is displayed for both iphone and android the new icon is displayed as a square, where a properties icon should be displayed.

Here is my sample code, where the data-icon align-justify is the new icon:

<div data-role="layout" data-id="default" id="layout">
        <header data-role="header">
            <div data-role="navbar"><a href="#drawer" data-rel="drawer" data-icon="align-justify" data-align="left" data-role="button"></a>List</div>
        </header>
        
        <!--View content will render here-->
        
        <footer data-role="footer">
            <div data-role="tabstrip">
                <a href="#home" data-icon="home">Home</a>
                <a href="Views/about.html">About</a>      
            </div> 
        </footer>
    </div>

And here are my styles:

@font-face {
                font-family: "fontawesome-webfont";
                src: url("fonts/fontawesome-webfont.woff") format("woff"),
                     url("fonts/fontawesome-webfont.ttf") format("truetype");
            }
            
            .km-icon:after,
            .km-icon:before
            {
                font: 1em/1em "fontawesome-webfont";
            }

Please can you tell me if this is a bug or where i am going wrong.

Thanks

[domiSchenk]

i think you're missing this one:

got it to work now!

CSS:
// your font
@font-face
{
    font-family: "fontello";
    src: url("fonts/fontello.woff") format("woff"),
    url("fonts/fontello.ttf") format("truetype");
}

//override kendo icons:            
.km-icon:after,
.km-icon:before
{
    font: 1em/1em "fontello";
}

// define your icons (804 is the icon-plus):
.km-fontello:after, 
.km-fontello:before
{ 
    content: "\e804"; 
}

HTML:
<div data-role="footer">
         <div data-role="tabstrip">
                    <a href="#tabstrip-home" data-icon="fontello">Home</a>
         </div>
</div>


it will automatically create:
<span class="km-icon km-fontello"></span>

for the content codes you can look at fontello/customize codes
Important are the last 3 digits!

so you can define all with \eXXX

i hope this helps

[Tim]

Hi DomiSchenk

thanks for the response.

I tried what you suggested, but it still does not work... Here is my code:

CSS

@font-face {
                font-family: "properties";
                src: url("fonts/properties.woff") format("woff"),
                     url("fonts/properties.ttf") format("truetype");
            }
            
            .km-icon:after,
            .km-icon:before
            {
                font: 1em/1em "properties";
            }            
            
            .km-properties:after,
            .km-properties:before
            {
                content: "\e630";
            }

HTML

<div data-role="tabstrip">
                <a id="testhome" href="#home" data-icon="properties">Home</a>
                <a href="Views/about.html" data-icon="info">About</a>  
                <a href="#" data-icon="delete">Delete</a>    
            </div>

This is the 'th-list' icon from the 'font-awesome' set on fontello.  It would be better if i could replace the entire default font set with my own custom set.  According to the docs all i have to set is

.km-icon:after,
.km-icon:before

but this does not work either?

[domiSchenk]

well everything looks right!

but are you sure that \e630 is the right code?

did you download the icons you want from fontello? are the more?
if so you can see in the css in the zip file what codes the icons uses.

tip:
just download this icon nothing else. then use code \e800
then it should work


or else follow my blog post: http://domischenk.ch/kendo-ui-mobile-custom-icon-with-font-face/

[Tim]

Hey again

I have figured it out.  I was taking the last 3 digits of the code when i should have been using the last 4.  So instead of e630 i should have been using 2630.

So now the question is, how do i use an entire library and not just a single font?  Again i did follow the tutorial on this but i could not get it to work.

Thanks

[domiSchenk]

if you want to use whole font awesome just download it from http://fortawesome.github.io/Font-Awesome/

then open the css what is inside the zip file and scroll down and copy this entries (you have to change them so the naming is right! best way would be add the km-:

.icon-glass:before {
  content: "\f000";
}
.icon-music:before {
  content: "\f001";
}
.icon-search:before {
  content: "\f002";
}
.icon-envelope-alt:before {
  content: "\f003";
}
.icon-heart:before {
  content: "\f004";
}
.icon-star:before {
  content: "\f005";
}
.icon-star-empty:before {
  content: "\f006";
}
.......
.....

[Tim]

I think... in retrospect it would be better to use individual icons to keep app size down.  I will probably only needs 5 or 6.

Thanks for the help answering my queries domiSchenk