1

我正在尝试通过 icomoon 字体在 wordpress 中通过菜单栏的文本链接左侧添加图标。我正在使用从 icomoon 下载的 CSS。我已经在 WP 管理区域的菜单选项区域中添加了该类。图标（字体）确实显示在“li”元素上，但我希望将它们添加到“a”元素中。仅供参考，添加字体的类使用 :before 选择器。这是css的摘录：

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: 'icomoon';
  font-style: normal;
  speak: none;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  color: $white;
}

.icon-home:before {
  content: "\68";
}
4

2 回答 2

1

试试这个。这是我使用的方法。

HTML

<h3 class="title-style">
    <a href="#">
    <span aria-hidden="true" data-icon="[insert number from icomoon]";></span>TITLE
    </a>
</h3>

CSS

.title-style > a{
    font-family: 'font name';
}

[data-icon]::before {
    font-family: 'icomoon';
    content: attr(data-icon);
    speak: none;
}
于 2013-01-27T14:51:57.953 回答
0

抱歉，如果我在错误的线程上发表评论，但我正在寻找一种向 WordPress 菜单添加额外字段的方法。建议使用“data-icon”而不是 CSS Pseudo :before 选择器以提高速度性能。目前，WordPress 菜单确实允许内联 html <i aria-hidden="true" data-icon="****"></i>，但如果我可以为该data-icon="***"属性创建一个新的输入字段，那将真的很有帮助。这样，将字体字形添加到菜单项就更简洁了。稍后，我希望能够在此字段中添加一个选择下拉菜单，其中包含字体字形的预览，但首先我需要能够正确使用 Walker for WP Menus。

于 2013-07-31T13:50:57.983 回答