我正在尝试为每个元素构建一个带有图标的菜单。
我正在使用（或尝试）
- 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');
但是，当我加载我的应用程序并调用资产转储的 CCS 文件时，路径是src: url(../../Resources/public/fonts/fontawesome-webfont.eot?v=4.2.0);