Symfony2 - Assetic - css 字体图标

Posted 2023-02-19

【中文标题】Symfony2 - Assetic - css 字体图标

【英文标题】：Symfony2 - Assetic - css font icons

【发布时间】：2014-06-20 01:27:30

【问题描述】：

如何在 /vendor 目录中包含通过 composer 安装的 css 字体图标库（例如 fontawesome）。包括：

% stylesheets filter='cs-s-rewrite' 
  '%kernel.root_dir%/../vendor/fortawesome/font-awesome/css/font-awesome.min.css'  %
  <link href=" asset_url " type="text/css" rel="stylesheet"/>
% endstylesheets %

但它不会重写字体文件 url，它保持不变，并且图标不会加载：

src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');

我知道，我们不能在 webroot 之外创建 url，但也许 Assetic 可以自动将此依赖项放入 /web？

我目前看到的唯一方法是使用安装后 composet 脚本将此资产复制到 /web 目录，但我想找到更好的方法。

谢谢！

【参考方案1】：

在#symfony 频道上询问，我必须将assetic 与font-awesone 一起使用的唯一答案是将它们包含在assetic 下的config.yml 中。原代码如下：

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:
    cs-s-rewrite: ~
    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$"

然后调用css文件如下：

# Common Stylesheets #
% stylesheets filter="?cs-s-rewrite"
  '%kernel.root_dir%/Resources/public/css/font-awesome.min.css'
  '@CorvusCoreBundle/Resources/public/css/common.less'
%
    <link rel="stylesheet" href=" asset_url " />
% endstylesheets %

最后转储文件。但是，根据我的经验，我会得到字体本身的重复文件。我可能在做一些愚蠢的事情。

HTH，

谭

信用：https://gist.github.com/ilikeprograms/a8db0ad7824b06c48b44

2015 年 6 月更新：针对 Symfony2 的 2.1/2.3 版本发布了答案。此答案可能适用于或不适用于最新版本：您必须检查

【讨论】：

你的副本是这样的吗：xxxxxx_font.eof，xxxxxxx.eof。如果是这种情况，那是因为您没有使用 --env=prod。

已经有一段时间了，自从我提供答案以来，我还没有使用过这个。但我认为是。感谢您的评论。 :)

我使用的是 Symfony 2.7，它把字体放到 assets/fonts_glyphicons_halflings_regular_woff2.woff2 而不是 fonts/glyphicons-halflings-regular.woff2 fonts_glyphicons_halflings_regular_woff2: inputs: %kernel.root_dir%/../vendor/almasaeed2010/adminlte/bootstrap/fonts/glyphicons-halflings-regular.woff2 outputs: fonts/glyphicons-halflings-regular.woff2

【参考方案2】：

上面的答案很好，但是对于您的字体未存储在应用程序目录中的情况，上述方法将不起作用。我的 CSS 文件保存在我自己的包中，因此为了确保找到它们，我需要像这样配置我的 app/config/config.yml；

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:
      - AjtrichardsAdminBundle
      - AjtrichardsMainBundle
    assets:
      font-awesome-ttf:
        inputs: '@AjtrichardsMainBundle/Resources/public/fonts/icons.ttf'
        output: 'fonts/icons.ttf'
      font-awesome-woff:
        inputs: '@AjtrichardsMainBundle/Resources/public/fonts/icons.woff'
        output: 'fonts/icons.woff'