Yii 2.0：覆盖 Bootstrap CSS 导致字形失败

Question

我试图在我的项目中覆盖 Bootstrap css。将这段代码添加到配置文件中是可行的，但是所有的字形图标都没有正确显示

'assetManager' => [
'bundles' => [
    'yii\bootstrap\BootstrapAsset' => [
         'sourcePath' => '@webroot',
         'css' => ['css/bootstrap.css']
         ],
    ],
],

前一页：

之后的页面：

我知道字体文件丢失了，但如何添加它们？

Answer 1

原来是我对yii2&bootstrap的误解。要覆盖 bootstrap css 我们需要将 bootstrap 分发（不仅是 bootstap.css）复制到新目录，在我的例子中它是 Web 可访问的 web/custombootstrap/dist

并在配置文件中覆盖如下：

'assetManager' => [
    'bundles' => [
        'yii\bootstrap\BootstrapAsset' => [
            'basePath' => '@webroot',
            'baseUrl' => '@web/custombootstrap/dist',
            'css' => ['css/bootstrap.css']
        ],
    ],
],

Answer 2

默认情况下，bootstrap.css 期望字体位于 css 文件夹的同级文件夹中。您的实现中不存在此文件夹。

来自 yii\web\Asset 的 $sourcePath 的文档：

You must set this property if the directory containing the source asset files is not Web accessible. By setting this property, yii\web\AssetManager will publish the source asset files to a Web-accessible directory automatically when the asset bundle is registered on a page.

yii\bootstrap\BootstrapAsset 的默认 $sourcePath 设置为 @bower/bootstrap/dist。此文件夹包含 3 个子文件夹：css、js 和 fonts，它们都发布到 assets 文件夹中。

要解决此问题，您需要：

将字体和 js 文件夹从 vendor/bower/bootstrap/dist 复制到您的 webroot 以维护 link。
将 $sourcePath 更改为 bootstrap/dist 文件夹的副本，并将其中的 bootstrap.css 替换为您自己的副本。

您也可以直接在 bootstrap.css 中更改字体路径，但我不推荐这样做，因为它更难维护。

Yii 2.0：覆盖 Bootstrap CSS 导致字形失败

Yii 2.0: Overriding Bootstrap CSS causes glyphicons fail

css

twitter-bootstrap

glyphicons

yii2