Kendo UI Mobile custom font tabstrip color not applied

4 posts, 0 answers
  1. Rick
    Rick avatar
    2 posts
    Member since:
    Oct 2009

    Posted 11 Oct 2013 Link to this post

    I've got a custom font so that I can have custom icons in the tabstrip. When I use my font, the icon shows up but it's not using the color specified in the css.

    It shows up black. Even if I set the color directly in the debugger, no color is applied.
    <See Black.png attachment>

    If I use the icon in a view, it shows up with correct color:
    <See Orange.png attachment>

    I assume there is some type of mask being applied but I can't figure out why it's making it black. I figured at the very least, it would be the same color as the other native icons.

    Note that if I change the color of all the icons (with the km-icon css class), my custom icons do not change.

    Note also: When I debug, I see that css is telling me that the color should be orange:

    css:
    .km-ios6 .km-tabstrip .km-icon.km-icon-trophies
    {
    font-size: 22px;
    margin-bottom: -7px;
    color: orange !important;
    }

    html:
    <div data-role="footer">
            <div data-role="tabstrip">
                <a href="#tabstrip-home" data-icon="home">Home</a>
                <a href="#tabstrip-journal" data-icon="icon-trophies">Journal</a>
            </div>
        </div>
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 14 Oct 2013 Link to this post

    Hello Rick,

    I wasn't able to reproduce this issue. Can you send a sample page or jsBin where we can reproduce it and help you fix it?

    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Rick
    Rick avatar
    2 posts
    Member since:
    Oct 2009

    Posted 14 Oct 2013 Link to this post

    I've attached the custom font but here's the css that I'm using:
    [class^="km-icon-"]:before, [class*=" km-icon-"]:before {
      font-family: "fishingfont";
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
         color: orange;
      font-variant: normal;
      text-transform: none;
      line-height: 1em;
      margin-left: .2em;
      font-size: 22px;
    }
    .km-icon-trophies:before { content: '\65'; } /* 'e' */
    I've attached the entire VS project but here is the html code:

    <div id="tabstrip-home"
        data-role="view"
        data-title="Home">
     
        <div data-role="content" class="view-content">
            Here is the icon outside of the tabstrip:<br/><br/>
            <i class="km-icon-trophies"></i>Home
        </div>
    </div>
    ...
    <!--Footer-->
    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#tabstrip-home" data-icon="icon-trophies">Home</a>
            <a href="#tabstrip-login" data-icon="contacts">Login</a>
            <a href="#tabstrip-location" data-icon="search">Location</a>
            <a href="#tabstrip-weather" data-icon="globe">Weather</a>
        </div>
    </div>

  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 16 Oct 2013 Link to this post

    Hello Rick,

    It seems the font's generated CSS is using the ::before pseudo-element, while in Kendo UI Mobile ::before is used for shadows. In order to get it working, you should use the ::after pseudo-element for you font, like this (I've added some modifications, like making the orange affect only the active state and fixed the line height):
    [class^="km-icon-"]:after, [class*=" km-icon-"]:after {
      font: 1em/1em "fishingfont";
      speak: none;
     
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      line-height: 36px;
      vertical-align: middle;
      margin-left: .2em;
      font-size: 22px;
    }
    .km-icon-gear:after { content: '\61'; } /* 'a' */
    .km-icon-fish:after { content: '\62'; } /* 'b' */
    .km-icon-journal:after { content: '\63'; } /* 'c' */
    .km-icon-hole:after { content: '\64'; } /* 'd' */
    .km-icon-trophies:after { content: '\65'; } /* 'e' */

    .km-ios6 .km-tabstrip .km-state-active .km-icon,
    .km-content [class^="km-icon-"], .km-content [class*=" km-icon-"]
    {
        color: orange;
    }


    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready