0

我有一个自定义字体，以便我可以在标签条中拥有自定义图标。当我使用我的字体时，图标会出现，但它没有使用 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>
4

1 回答 1

0

似乎您正在使用的字体生成器正在设置 ::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;
}
于 2013-10-16T06:36:48.383 回答