未应用Kendo UI Mobile自定义字体标签颜色

Question

我有一个自定义字体，以便我可以在标签页中使用自定义图标。当我使用我的字体时，图标显示但它没有使用css中指定的颜色。

显示黑色。即使我直接在调试器中设置颜色，也不会应用颜色。

如果我在视图中使用该图标，则会显示正确的颜色：

我认为应用了某种类型的蒙版，但我无法弄清楚为什么它会变黑。我至少想到，它将与其他原生图标颜色相同。

请注意，如果我更改所有图标的颜色（使用km-icon css类），我的自定义图标不会更改。

另请注意：当我调试时，我看到css告诉我颜色应该是橙色：

的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>

Answer 1

似乎你正在使用的字体生成器正在构造:: before伪元素，而Kendo UI Mobile的图标中的这个元素用于阴影。您应该设置:: after伪元素的样式，如下所示：

[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;
}