symfony3，包括一个css库与一些依赖

zyfwsgd6 于 2023-04-07 发布在其他

关注(0)|答案(4)|浏览(99)

在一个个人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页面时，我得到了错误：

我理解库font-awesome需要使用一些其他文件。我的问题是：我怎么能/必须正确添加这些anothers文件在symfony 3？
谢谢！

symfony

来源：https://stackoverflow.com/questions/45758272/symfony-3-include-a-css-library-with-some-dependencies

4条答案

按热度按时间

lvmkulzt1#

我从mywebsite/web/library/font-awesome/fonts/* 添加示例符号链接到mywebsite/web/fonts .我不知道是否有更好的解决方案，但我没有找到另一个，这工作

赞(0）回复(0）举报 2023-04-07

drnojrws2#

fortawesome/font-awesome通过composer
然后，您必须添加额外的条目到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

你就完成了！在你的模板中提到字体文件是 * 没有 * 必要的，它们是自动复制的。

赞(0）回复(0）举报 2023-04-07

o8x7eapl3#

我应该补充的是，webpack/encore包是新的，在我看来要好得多！它取代了assetic。
您还可以使用此工具轻松地动态自定义 Bootstrap 主题。

赞(0）回复(0）举报 2023-04-07

xcitsw884#

使用symfony 3 / 4 / 5 / 6
解决方法是在<style> </style>标签中包含字体css文件

/* fallback */
@font-face {
  font-family: 'Material Icons Two Tone';
  font-style: normal;
  font-weight: 400;
  src: url('material/material.woff2') format('woff2');
}

而不是把它变成

/* fallback */
@font-face {
    font-family: 'Material Icons Two Tone';
    font-style: normal;
    font-weight: 400;
    src: url({{ asset('dashboard/assets/fonts/material/material.woff2') }}) format('woff2');
}

其中material.css文件

public/dashboard/assets/fonts/material.css

和文件包含

[![@font-face {
  font-family: 'Material Icons Two Tone';
  font-style: normal;
  font-weight: 400;
  src: url('material/material.woff2') format('woff2');
}

.material-icons-two-tone {
  font-family: 'Material Icons Two Tone';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}]

赞(0）回复(0）举报 2023-04-07

我来回答

symfony3，包括一个css库与一些依赖

4条答案

相关问题

热门标签

最新问答