各要素のアイコンを使用してメニューを作成しようとしています。
私は使用しています（または使用しようとしています）
- MopaBootstrapBundle
- KnpMenuBundle
- フォント素晴らしい
メニュー構造は表示され、正常に機能していますが、アイコンが表示されていません。誰かが私をここで正しい軌道に乗せることができますか?
これまでに行ったことは次のとおりです。
config.yml のセットアップ:
assetic:
debug: "%kernel.debug%"
use_controller: false
filters:
cssrewrite: ~
cssembed:
jar: %kernel.root_dir%/Resources/java/cssembed.jar
apply_to: "\.css$|\.less$"
yui_css:
jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
yui_js:
jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
[...]
mopa_bootstrap:
form: ~ # Adds twig form theme support
menu: ~ # enables twig helpers for menu
icons:
icon_set: fontawesome4
shortcut: icon
私のブートストラップスタイルを含める/app/Resources/MopaBootstrapBundle/views/layout.html.twig
{% block head_style %}
{{ parent() }}
{% stylesheets filter='less,cssrewrite,?yui_css'
'bundles/mopabootstrap/less/mopabootstrapbundle-fa4.less'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
{% endblock head_style %}
メニューの作成:
public function createMainMenu(FactoryInterface $factory, array $options)
{
$menu = $factory->createItem(
'root', array(
'navbar' => true,
)
);
// Main Menu -> Config
$menu->addChild('Item 1', array(
'route' => 'home',
'caret' => true,
'icon' => 'fa-home',
)
);
$dropdown = $menu->addChild('Item 2', array(
'dropdown' => true,
'caret' => true,
'icon' => 'fa-archive',
)
);
$dropdown->addChild('Sub-item 1', array('route' => 'si1'));
$dropdown->addChild('Sub-item 2', array('route' => 'si2'));
$dropdown->addChild('Sub-item 3', array('route' => 'si3'));
return $menu;
}
ページのソースを見ると、すべてのクラスが正しく設定されていることがわかりました。ただし、リンクされたスタイル シートでは、次のことがわかりました。
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url(../../bundles/mopabootstrap/fonts/fontawesome-webfont.eot?v=4.2.0);
src: url(../../bundles/mopabootstrap/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0) format('embedded-opentype'), url(../../bundles/mopabootstrap/fonts/fontawesome-webfont.woff?v=4.2.0) format('woff'), url(../../bundles/mopabootstrap/fonts/fontawesome-webfont.ttf?v=4.2.0) format('truetype'), url(../../bundles/mopabootstrap/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular) format('svg');
font-weight: normal;
font-style: normal;
}
私のセットアップにはパス../../bundles/mopabootstrap/fonts/が存在しないようです。これにより、アイコンが欠落していることが説明されます。ただし、どのように変更できるかわかりません。
ドキュメントで、@icon-font-path変数定義への参照を見つけました。それをどこでどの値で定義するかについて、私は少し途方に暮れています。
注意: フォント ファイルは私のweb/fontsフォルダーにあります。これはすべて Windows マシンで行われています。
アップデート：
次の場所に FontAwesome ファイルがあります。
<my_project_path>\web\bundles\mopabootstrap\fonts\fa4<my_project_path>\web\fonts
Glyphicon フォント ファイルのみが次の場所にあります。
<my_project_path>\web\bundles\mopabootstrap\bootstrap\fonts.
また、結果のCSSファイルのパスを定義する@icon-font-path: "../fonts/";と、/src/<my_bundle>/Resources/public/less/mystyles.lesssrc: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
ただし、アプリをロードして、assetic によってダンプされた CCS ファイルを呼び出すと、パスは次のようになります。src: url(../../Resources/public/fonts/fontawesome-webfont.eot?v=4.2.0);