Applying custom icon set with font-face

7 posts, 1 answers
  1. Tim
    Tim avatar
    5 posts
    Member since:
    Sep 2013

    Posted 16 Sep 2013 Link to this post

    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
  2. domiSchenk
    domiSchenk avatar
    55 posts
    Member since:
    Mar 2013

    Posted 16 Sep 2013 Link to this post

    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
    
    
  3. Tim
    Tim avatar
    5 posts
    Member since:
    Sep 2013

    Posted 17 Sep 2013 Link to this post

    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?
  4. domiSchenk
    domiSchenk avatar
    55 posts
    Member since:
    Mar 2013

    Posted 17 Sep 2013 Link to this post

    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/
  5. Tim
    Tim avatar
    5 posts
    Member since:
    Sep 2013

    Posted 17 Sep 2013 Link to this post

    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
  6. domiSchenk
    domiSchenk avatar
    55 posts
    Member since:
    Mar 2013

    Posted 17 Sep 2013 Link to this post

    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";
    }
    .......
    .....
  7. Answer
    Tim
    Tim avatar
    5 posts
    Member since:
    Sep 2013

    Posted 17 Sep 2013 Link to this post

    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
Back to Top