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 %}

来自渲染的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");
}

目录结构

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

任何可以帮助我的人？

Answer 1

我的解决方法适用于开发和生产模式。我已经在Symfony~2和~3上测试了它。

<强>摘要

将字体文件复制到捆绑包公用文件夹中，在我的情况下： AppBundle/Resources/public/fonts/font-awesome/
运行bin/console assets:install，因此在这种情况下，它会将此文件夹复制到 web / bundles / fonts / font-awesome / 下。（旧的Symfony版本中的 app / console ）
在定义font-face的CSS文件中，将其用作路径：../bundles/app/fonts/font-awesome/ 例如：../bundles/app/fonts/font-awesome/fontawesome-webfont.ttf

<强>详情

我使用较少的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

摘录：

{% 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：

//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');
}

希望这会有所帮助。如果您对此有疑问，请随时提出！

Assetic（Symfony） - Font Awesome在开发环境中不起作用

config.yml

base.html.twig

片段

font-awesome css-file

目录结构

1 个答案: