Symfony2 - Assetic - css font icons

Alex.Sh picture Alex.Sh · May 3, 2014 · Viewed 15.1k times · Source

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!

Answer

thoroc picture thoroc · Jul 16, 2014

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