Symfony 3,包含一个带有一些依赖关系的css库

时间:2017-08-18 13:48:01

标签: symfony assets assetic

从个人symfony 3项目,我想使用font-awesome库。在config.yml文件中,我添加了一个类似的资产:

    awesomefont_css:
        inputs:
            - '%kernel.root_dir%/../web/library/font-awesome/css/font-awesome.css'

我从index.php页面调用资产:

{% stylesheets output="stylesheet.css"
'@bootstrap_css'
'@awesomefont_css'
"@style_css"
%}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}

我清除了缓存(通过php bin / console cache:clear)但是当我加载我的php页面时,我收到错误:

enter image description here

我理解库字体很棒,需要使用其他文件。我的问题是:我怎样才能/必须在symfony 3中正确添加这些文件?

谢谢!

3 个答案:

答案 0 :(得分:0)

我从mywebsite / web / library / font-awesome / fonts / *添加样本符号链接到mywebsite / web / fonts。我不知道是否有更好的解决方案,但我找不到另一个和那个工作

答案 1 :(得分:0)

我通过作曲家加入了fortawesome/font-awesome

然后,您必须在config.yml中添加其他条目:

        fontawesome_css:
            inputs:
                - '%kernel.root_dir%/../vendor/fortawesome/font-awesome/css/font-awesome.css'
            filters: [cssrewrite]
        font-awesome-otf:
            inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/FontAwesome.otf'
            output: 'fonts/FontAwesome.otf'
        font-awesome-eot:
            inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.eot'
            output: 'fonts/fontawesome-webfont.eot'
        font-awesome-svg:
            inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.svg'
            output: 'fonts/fontawesome-webfont.svg'
        font-awesome-ttf:
            inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.ttf'
            output: 'fonts/fontawesome-webfont.ttf'
        font-awesome-woff:
            inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.woff'
            output: 'fonts/fontawesome-webfont.woff'
        font-awesome-woff2:
            inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.woff2'
            output: 'fonts/fontawesome-webfont.woff2'

然后只包括fontawesome_css(就像你已经做过的那样):

    {% block stylesheets %}
        {% stylesheets '@bootstrap_css' '@fontawesome_css' '@custom_css' %}
            <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}"/>
        {% endstylesheets %}
    {% endblock %}

最后,运行

bin/console assetic:dump

你已经完成了! 在模板中提及字体文件是必要的,它们会自动复制。

答案 2 :(得分:0)

我应该补充说webpack/encore包是新的,在我看来更好!它取代了资产。

您还可以使用此工具轻松自定义您的引导主题。