아이콘이 MopaBootstrapBundle 및 FontAwesome과 함께 표시되지 않음

Question

각 요소에 아이콘이있는 메뉴를 작성하려고합니다. 내가 사용 (또는하려고)하고

• MopaBootstrapBundle
• KnpMenuBundle
• FontAwesome

메뉴 구조를 표시하고 잘 작동하지만, 아이콘이 표시되지 않습니다. 누구든지 여기에 올바른 길에 나를 놓을 수 있습니까? 내 메뉴를 만들기 내 /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 %} 

에서 부트 스트랩 스타일을 포함

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 

:

이 config.yml을 설정 : 여기

내가 지금까지 한 일이다

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/ 누락 된 아이콘을 설명 할 수있는, 내 설치에 존재하는 표시되지 않습니다 경로. 그러나 나는 그것을 어떻게 수정할 수 있는지 알 수 없다.

documentation에서 나는 변수 정의 @icon-font-path에 대한 참조를 발견했습니다. 나는 그것을 정의하고 어느 가치를 지니고 있는지에 관해서는 약간의 상실감에 처해있다.

NB : 글꼴 파일은 내 web/fonts 폴더에 있습니다. 이 모든 일은 Windows 컴퓨터에서 발생합니다.

UPDATE :

내가이 위치에서 FontAwesome 파일을 발견하고 :

만 Glyphicon 글꼴 파일

• <my_project_path>\web\bundles\mopabootstrap\fonts\fa4
• <my_project_path>\web\fonts이
  에서 찾을 수 있습니다
  • <my_project_path>\web\bundles\mopabootstrap\bootstrap\fonts.

  나는 또한 내가 /src/<my_bundle>/Resources/public/less/mystyles.less에 @icon-font-path: "../fonts/";를 정의 할 때 내 응용 프로그램을로드하고 assetic에 의해 버려진 CCS 파일을 호출 할 때 결과 CSS 파일의 경로는, 그러나 src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');

  입니다 것으로 나타났습니다 경로는 src: url(../../Resources/public/fonts/fontawesome-webfont.eot?v=4.2.0);입니다 공급 업체/MOPA/부트 스트랩 - 번들/모파/BootstrapBundle/자원/공공/이하/글꼴 awesome4/variables.less FA-글꼴 경로 @

  에서

Answer 1

변경 : "../fonts/";

FA 폰트 경로 @

의해

"../fonts/fa4";

Answer 2

나는 그것이 오래된 게시물이라는 것을 알고 있지만 같은 구성 파일과 동일한 문제가있어서 해결책을 찾았습니다.

이 라인은 잘못 :

'icon' => 'fa-home', 

당신은에 의해 그들 모두를 교체해야 : FA- prefixe를 사용하지 마십시오

'icon' => 'home', 

)

당신 것 구성 파일에 글리 phicon 아이콘이있는 경우 :

mopa_bootstrap: 
    form: ~ # Adds twig form theme support 
    menu: ~ # enables twig helpers for menu 
    icons: 
     icon_set: glyphicon #Use the glyph icons 
     shortcut: icon 

fontwesome으로 글리프콘을 바꾸면 fontawwesome 아이콘이 표시되지만 (내 문제) "fa-"접두어는 사용하지 마십시오.

mopa_bootstrap: 
    form: ~ # Adds twig form theme support 
    menu: ~ # enables twig helpers for menu 
    icons: 
     icon_set: fontawesome4 #Use the fontawesome4 icons 
     shortcut: icon