Symfony2 - Assetic - css font icons

Question

How to include css font icon libraries istalled via composer in /vendor dir (fontawesome for example). Include:

{% stylesheets filter='cssrewrite' 
  '%kernel.root_dir%/../vendor/fortawesome/font-awesome/css/font-awesome.min.css'  %}
  <link href="{{ asset_url }}" type="text/css" rel="stylesheet"/>
{% endstylesheets %}

But it does't rewrite font files url, it stays same, and icons wont load:

src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');

I know, we can't make urls poined outside of webroot, but maybe assetic can put this dependencies to /web automatically?

The only way I see for now is to copy this assets to /web dir with post-install composet script, but I'd like to find a better way.

Thanks!

Solution 1

Asked on the #symfony channel and the only answer I've got to use assetic with font-awesone was to include them in the config.yml under assetic. The original code is the following:

assetic:
  java: /usr/bin/java
  use_controller: false
  bundles: [ CorvusFrontendBundle, CorvusAdminBundle ]
  assets:
    font-awesome-otf:
      inputs: '%kernel.root_dir%/Resources/public/fonts/FontAwesome.otf'
      output: 'fonts/FontAwesome.otf'
    font-awesome-eot:
      inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.eot'
      output: 'fonts/fontawesome-webfont.eot'
    font-awesome-svg:
      inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.svg'
      output: 'fonts/fontawesome-webfont.svg'
    font-awesome-ttf:
      inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.ttf'
      output: 'fonts/fontawesome-webfont.ttf'
    font-awesome-woff:
      inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.woff'
      output: 'fonts/fontawesome-webfont.woff'
  filters:
    cssrewrite: ~
    yui_js:
      jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.8.jar
    lessphp:
       file: "%kernel.root_dir%/../vendor/oyejorge/less.php/lessc.inc.php"
       apply_to: "\.less$"

Then calling the css file as follow:

{# Common Stylesheets #}
{% stylesheets filter="?cssrewrite"
  '%kernel.root_dir%/Resources/public/css/font-awesome.min.css'
  '@CorvusCoreBundle/Resources/public/css/common.less'
%}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

And finally dumping the files. However, and in my experience, I get duplicate files for the fonts themselves. I am probably doing something stupid.

HTH,

Tam

credit: https://gist.github.com/ilikeprograms/a8db0ad7824b06c48b44

Update June 2015: The answer was posted for version 2.1/2.3 of Symfony2. This answer might apply or not to the most current version: you will have to check

Solution 2

Great answer above but for occasions when your font's aren't stored in the app directory the above won't work. My CSS files are kept in my own bundle, so to make sure they are found I needed to configure my app/config/config.yml like so;

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:
      - AjtrichardsAdminBundle
      - AjtrichardsMainBundle
    assets:
      font-awesome-ttf:
        inputs: '@AjtrichardsMainBundle/Resources/public/fonts/icons.ttf'
        output: 'fonts/icons.ttf'
      font-awesome-woff:
        inputs: '@AjtrichardsMainBundle/Resources/public/fonts/icons.woff'
        output: 'fonts/icons.woff'

Comments

[Henry]

Are your duplicates like this: xxxxxx_font.eof , xxxxxxx.eof. If that's the case its because you aren't using --env=prod.

[thoroc]

It has been a while, and I haven't used this since the answer I have provided. But I think it was. Thanks for the comment. :)

[Serhii Smirnov]

I'm using Symfony 2.7 and it puts fonts to assetic/fonts_glyphicons_halflings_regular_woff2.woff2 instead of fonts/glyphicons-halflings-regular.woff2 fonts_glyphicons_halflings_regular_woff2: inputs: %kernel.root_dir%/../vendor/almasaeed2010/adminlte/bootstrap‌​/fonts/glyphicons-ha‌​lflings-regular.woff‌​2 outputs: fonts/glyphicons-halflings-regular.woff2