README

此扩展包安装了一个InserTag，它允许在Contao中使用Bootstrap Icons（v1.9.1）作为字体或通过SVG。

标签的一般形式

标签以前缀  bi  开始，后面跟着 三个 参数。参数1和2是必需的，参数3和4是可选的，也可以省略。标签总共由4个参数组成。一般形式如下

{{bi::name::classes::styles}}

第一个参数 "bi"

...是常量，用于标识标签。

第二个参数 "name"

...必须替换为图标的名称。应使用图标在 Bootstrap Icons 页面上指定的名称：[https://icons.bootstrap.ac.cn](https://icons.bootstrap.ac.cn) - 不带前缀 bi-！

示例

{{bi::check}}

结果应显示此符号：[https://github.com/contao-themes-net/bootstrap-icons-inserttag/blob/HEAD/src/Resources/public/img/bootstrap/check.svg](https://github.com/contao-themes-net/bootstrap-icons-inserttag/blob/HEAD/src/Resources/public/img/bootstrap/check.svg)

第三个参数 "classes"

...可以（是可选的）包含一个或多个CSS类名。管理员需要自行提供类。多个类名可以像在HTML标签的class属性中一样记录 - 即通过空格分隔。

示例

{{bi::check::class1 class2 class3}}

结果可能如下 - 根据类的定义

第四个参数 "styles"

...可以（是可选的）包含一个或多个样式声明。

示例

// für svg
{{bi::badge-3d-fill::class1 class2::width:50px;background-color:orangered;border-radius: 50px;}}

// für icon font
{{bi::badge-4k-fill::class1 class2::font-size:3em;background-color:orangered;border-radius: 50px;}}

结果应如下

配置

Bootstrap Icons InsertTag 扩展包可以通过 parameters.yml 进行少量配置。该文件如下提供

parameters:
    bootstrap_config:
        source:
            use_cdn: false
            css_source: 'https://cdn.jsdelivr.net.cn/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css'
            js_source:  'https://cdn.jsdelivr.net.cn/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js'
        use:
            icon_font: false
            svg: true

配置位于 bootstrap_config 键之下。

目前有两个键在这里被评估。键 source 和键 use。

source

由于扩展包提供了一个回退配置（来自Bootstrap Icons 1.9.1的脚本、字体、SVG和CSS），因此可以通过键 use_cdn: true 在此处激活或禁用从CDN加载。如果将 use_cdn 设置为 false，则将使用本地扩展包资源，以便扩展包在CDN版本更改时仍然可以运行。

如果激活了 use_cdn，则可以通过 css_source 和 js_source 定义源。默认为上述源。

use

使用键 use 可以设置图标的两种显示方法。回退是 icon_font: true。两个键都可以设置为 true。但是（在当前版本中），不能同时使用两种显示方法！如果要用SVG代替图标字体，则必须将 icon_font: false 和 svg: true 设置为 true。否则，始终回退到 icon_font: true。

Bootstrap Icons Inserttag 扩展包

此扩展包安装了一个InserTag，它允许Bootstrap Icons（v1.9.1）作为字体或通过SVG在Contao中使用。

标签的一般形式

标签以前缀  bi 开始，并且后面跟着 三个参数。参数 1 和 2 是必需的，参数 3 和 4 是可选的，可以省略。因此，该标签总共包含 4 个参数。其一般形式如下

{{bi::name::classes::styles}}

第一个参数 "bi"

...是常量，用于标识标签。

第二个参数 "name"

...必须替换为图标的名称。图标的名称应使用 Bootstrap Icons 页面上所示： https://icons.bootstrap.ac.cn - 即，不包括 bi- 前缀！

示例

{{bi::check}}

结果你应该看到这个字符：

第三个参数 "classes"

...可能（是可选的）包含一个或多个 CSS 类名。管理员必须负责提供类。多个类名可以像 HTML 标签的类属性那样注明 - 即，也可以用空格分隔。

示例

{{bi::check::class1 class2 class3}}

结果可能 - 根据类的定义 - 看起来像这样

第四个参数 "styles"

...可能（是可选的）包含一个或多个样式声明。

示例

// for svg
{{bi::badge-3d-fill::class1 class2::width:50px;background-color:orangered;border-radius: 50px;}}

// for icon font
{{bi::badge-4k-fill::class1 class2::font-size:3em;background-color:orangered;border-radius: 50px;}}

结果可能 - 根据类的定义 - 看起来像这样

配置

Bootstrap Icons InsertTag Bundle 可以通过 parameters.yml 进行有限配置。这如下所示

parameters:
    bootstrap_config:
        source:
            use_cdn: false
            css_source: 'https://cdn.jsdelivr.net.cn/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css'
            js_source: 'https://cdn.jsdelivr.net.cn/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js'
        use:
            icon_font: false
            svg: true

配置位于 bootstrap_config 键下面。

目前，那里还评估了两个其他键。 source 键和 use 键。

source

由于捆绑包（脚本、字体、SVG 和 CSS 从 Bootstrap Icons 1.9.1）提供了一个回退配置，因此可以使用 use_cdn: true 键来启用或禁用从 CDN 加载。如果 use_cdn 设置为 false，则使用本地捆绑包资源，以便在 CDN 版本更改的情况下捆绑包仍然可执行。

如果启用了 use_cdn，可以使用 css_source 和 js_source 定义源。默认源如上所述。

use

可以使用 use 键来定义图标的两种显示方法。回退是 icon_font: true。这两个键都可以设置为 true。**但是（在当前版本中）不能同时使用两种显示方法！如果要用 SVG 方法代替图标字体，则必须将 icon_font: false 和 svg: true 设置。否则，始终回退到 icon_font: true。