README

此包安装了一个InsertTag，通过它可以在Contao中使用Font Awesome图标作为字体或通过SVG。

关于Font Awesome

完整的图标集、示例和文档可以在以下网址找到：https://fontawesome.com/

许可证

Font Awesome字体根据SIL Open Font License授权 - http://scripts.sil.org/OFL
Font Awesome CSS、LESS和SASS文件根据MIT许可证授权 - https://open-source.org.cn/licenses/mit-license.html
Font Awesome图标根据CC BY 3.0许可证授权 - http://creativecommons.org/licenses/by/3.0/
在Font Awesome 3.0中不再需要归属，但非常感谢："Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"

标签的一般形式

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

{{fa::name::classes::styles}}
{{fa-brands::name::classes::styles}}
{{fa-regular::name::classes::styles}}
{{fa-solid::name::classes::styles}}

第一个参数"fa"

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

第二个参数"name"

...必须替换为图标的名称。应使用图标名称，如它在Font Awesome图标页面上所表示的那样： https://fontawesome.com/search?m=free&o=r - 不带前缀fa-！

示例

{{fa-solid::check}}

第三个参数"classes"

...可以（是可选的）包含一个或多个CSS类名。管理员必须自行负责提供类。多个类名可以像HTML标签的class属性一样记录，即也可以通过空格分隔。

示例

{{fa-solid::check::class1 class2 class3}}

注意！ 对于SVG元素作为图像，无法通过style属性设置前景色（color）！

第四个参数"styles"

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

示例

// for svg (svg: true)
{{fa-solid::check::fa-spin fa-3x fa-fw::width:50px;background-color:orangered;border-radius: 50px;}}

// for icon font
{{fa-solid::check::fa-spin fa-3x fa-fw::font-size:3em;background-color:orangered;border-radius: 50px;}}

配置

Font Awesome Inserttag Bundle可以通过parameters.yml进行配置。此文件如下所示

parameters:
    font_awesome_config:
        local_source: ''
        use:
            icon_font: true
            svg: false
            svg_sprites: false
            js: false

配置位于font_awesome_config键下。

目前，有两个键被评估。键use和local_source。

use

使用键 use 可以设置图标显示方法。默认值为 icon_font: true。如果使用 SVG 作为图像而不是图标字体，则需要设置 icon_font: false 和 svg: true。现在会输出 img 标签。使用 svg_sprites: true 和 svg: false 可以将图标作为 SVG-Sprites 包含。如果您想通过 JavaScript 生成 SVG 标签，可以在 svg: true 的基础上添加 js: true。

示例

图标字体

<i class="fa fa-check class1 class2 class3"></i>

作为图片的 SVG

<img src="bundles/contaothemesnetfontawesomeinserttag/svgs/regular/phone.svg" class="fa-check class1 class2 class3" alt="phone">

SVG-Sprites

<svg class="icon class1 class2 class3">
    <use xlink:href="bundles/contaothemesnetfontawesomeinserttag/sprites/solid.svg#phone"></use>
</svg>

SVG + JavaScript

<svg style="display: none;">
    <symbol data-fa-symbol="phone" class="svg-inline--fa fa-phone" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="" id="phone">
        <path fill="currentColor" ...></path>
    </symbol>
</svg>
<!-- <i data-fa-symbol="phone" class="fa-solid fa-phone"></i> Font Awesome fontawesome.com -->
<svg class="icon fa-2x"><use xlink:href="#phone"></use></svg>

local_source

通过 local_source: 'files/dein-pfad-zum-fontawesome-ordner' 可以调整 Font Awesome 的路径，以便例如包含 Pro 版本或其他 Font Awesome 版本。请提供从 files 到 Font Awesome 目录的完整路径，其中包含 css、js、svgs 等文件夹。

Font Awesome 插入标签

此包安装了一个插入标签，允许在 Contao 中使用 Font Awesome 图标作为字体或通过 SVG。

标签的一般形式

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

{{fa::name::classes::styles}}
{{fa-brands::name::classes::styles}}
{{fa-regular::name::classes::styles}}
{{fa-solid::name::classes::styles}}

第一个参数 "fa"

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

第二个参数 "name"

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

示例

{{fa-solid::check}}

第三个参数 "classes"

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

示例

{{fa-solid::check::class1 class2 class3}}

第四个参数 "styles"

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

示例

// for svg (svg: true)
{{fa-solid::check::fa-spin fa-3x fa-fw::width:50px;background-color:orangered;border-radius: 50px;}}

// for icon font
{{fa-solid::check::fa-spin fa-3x fa-fw::font-size:3em;background-color:orangered;border-radius: 50px;}}

配置

可以使用 parameters.yml 配置 Font Awesome 插入标签包。它如下提供

parameters:
    font_awesome_config:
        local_source: ''
        use:
            icon_font: true
            svg: false
            svg_sprites: false
            js: false

配置位于 font_awesome_config 键下面。

目前，还有两个其他键在此处评估。即 local_source 键和 use 键。

use

use 键可以用来定义图标的四种显示方法。默认为 icon_font: true。如果使用 SVG 作为图像方法而不是图标字体，则必须设置 icon_font: false 和 svg: true。现在会输出 img 标签。使用 svg_sprites: true 和 svg: false 可以将图标作为 svg sprites 包含。如果您想通过 JavaScript 生成 SVG 标签，可以在 svg: true 的基础上添加 js: true。

示例

图标字体

<i class="fa fa-check class1 class2 class3"></i>

作为图片的 SVG

<img src="bundles/contaothemesnetfontawesomeinserttag/svgs/regular/phone.svg" class="fa-check class1 class2 class3" alt="phone">

SVG Sprites

<svg class="icon class1 class2 class3">
    <use xlink:href="bundles/contaothemesnetfontawesomeinserttag/sprites/solid.svg#phone"></use>
</svg>

SVG + JavaScript

<svg style="display: none;">
    <symbol data-fa-symbol="phone" class="svg-inline--fa fa-phone" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="" id="phone">
        <path fill="currentColor" ...></path>
    </symbol>
</svg>
<!-- <i data-fa-symbol="phone" class="fa-solid fa-phone"></i> Font Awesome fontawesome.com -->
<svg class="icon fa-2x"><use xlink:href="#phone"></use></svg>

contao-themes-net / font-awesome-inserttag-bundle

维护者

详细信息

README

关于Font Awesome

标签的一般形式

第一个参数"fa"

第二个参数"name"

第三个参数"classes"

第四个参数"styles"

配置

use

local_source

Font Awesome 插入标签

标签的一般形式

第一个参数 "fa"

第二个参数 "name"

第三个参数 "classes"

第四个参数 "styles"

配置

use