1

メニューバーからwordpressのテキストリンクの左側に、icomoonフォントを介してアイコンを追加しようとしています。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 メニューに追加のフィールドを追加する方法を探しています。高速パフォーマンスのために、CSS Pseudo :before セレクターではなく「data-icon」を使用することをお勧めします。現在、WordPress メニューではインライン html が許可されていますが、属性<i aria-hidden="true" data-icon="****"></i>用の新しい入力フィールドを作成できれば非常に役立ちます。data-icon="***"このようにして、フォントグリフをメニュー項目に追加するのが少しすっきりします。後で、このフィールドに選択ドロップダウン メニューを追加して、フォント グリフのプレビューを表示できるようにしたいと考えていますが、最初に、Walker for WP Menus を適切に使用できるようにする必要があります。

于 2013-07-31T13:50:57.983 に答える