Assetic (Symfony) - Font Awesome doesn't work in dev environment

Question

Assetic (Symfony) - Font Awesome doesn't work in dev environment

3.3k Views Asked by Helena Standaert At 11 April 2025 at 10:51

I'm trying to figure out how to make this icon font work in the dev environment of Symfony. In production environment, everything works fine. I'm using assetic to manage my assets. I downloaded font-awesome with bower. Here's my code:

config.yml

# Assetic Configuration
assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        [ AdminBundle, UserBundle, ShopBundle, SiteBundle ]
    filters:
        cssrewrite: ~

base.html.twig

{% block stylesheets %}
    {% stylesheets
        'vendor/bootstrap/dist/css/bootstrap.css'
        'vendor/font-awesome/css/font-awesome.min.css'

        filter='?cssrewrite'
    %}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

Snippet from rendered html

<html>
  <head>
    <meta charset="UTF-8">
    <title>Admin Area</title>
    <link href="/stocksolutions/web/app_dev.php/css/00007d5_bootstrap_1.css" type="text/css" rel="stylesheet">
    <link href="/stocksolutions/web/app_dev.php/css/00007d5_font-awesome.min_2.css" type="text/css" rel="stylesheet">
    <link href="/stocksolutions/web/app_dev.php/css/b4f457d_part_1_admin_1.css" type="text/css" rel="stylesheet">
    <link href="/stocksolutions/web/favicon.ico" type="image/x-icon" rel="icon">
   </head>
   <body>
    (...)

    <script src="/stocksolutions/web/app_dev.php/js/ddd7e15_jquery.min_1.js" type="text/javascript"></script>
    <script src="/stocksolutions/web/app_dev.php/js/ddd7e15_bootstrap.min_2.js" type="text/javascript"></script>

   </body>
</html>

font-awesome css-file

@font-face {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.1.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.1.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular") format("svg");
}

Directory Structure

- web
--- css
--- fonts
--- js
...

Anyone who can help me with this?

Original Q&A

There are 1 best solutions below

**g.adam** · Answer 1

My workaround works both dev and production mode. I have tested it on Symfony ~2 and ~3 too.

Summary

Copy the font files into your bundles public folder, in my case: AppBundle/Resources/public/fonts/font-awesome/
Run bin/console assets:install, so it will copy this folder under web/bundles/fonts/font-awesome/ in this case. (app/console in older Symfony version)
In your CSS file where you define font-face, use this as the path: ../bundles/app/fonts/font-awesome/ For example: ../bundles/app/fonts/font-awesome/fontawesome-webfont.ttf

Details

I'm using less css.

config.yml

assetic:
filters:
    cssrewrite: ~
    lessphp:
        file: "%kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php"
        apply_to: '\.less$'
        formatter: "compressed"
        preserve_comments: false

snippet from my layout:

{% stylesheets
'@AppBundle/Resources/private/vendor/bootstrap/dist/css/bootstrap.min.css'
'@AppBundle/Resources/private/less/styles.less'
output='css/frontend.css' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet"/>
{% endstylesheets %}

snipets from less files:

//vars.less (this is imported into styles.less)
@fonts_dir: "../bundles/app/fonts/";
@fontAwesomeDir: @fonts_dir + "font-awesome/";
@font-awesome: @fontAwesomeDir + "fontawesome-webfont.ttf";

//font-awesome.less (this is imported into styles.less too)
@font-face {
  font-family: 'FontAwesome';
  font-weight: normal;
  font-style: normal;
  src: local('FontAwesome'), url(@font-awesome) format('truetype');
}

Hope this helps. If you have questions about this, feel free to ask!

Assetic (Symfony) - Font Awesome doesn't work in dev environment

config.yml

base.html.twig

Snippet from rendered html

font-awesome css-file

Directory Structure

There are 1 best solutions below

Related Questions in SYMFONY

Related Questions in FONT-AWESOME

Related Questions in ASSETIC

Trending Questions

Popular # Hahtags

Popular Questions