README

Redactor Font Awesome 列表

此 redactor 插件允许您将 Font Awesome 图标添加为 redactor 列表的标记。

将通过简单的图标选择器生成 HTML

<ul class="fa-ul">
    <li><span class="fa-li"><i class="fas fa-check"></i></span> List item 1</li>
    <li><span class="fa-li"><i class="fas fa-check"></i></span> List item 2</li>
    <li><span class="fa-li"><i class="fas fa-times"></i></span> List item 3</li>
</ul>

请参阅 Font Awesome 的 列表图标。

要求

此插件需要 Craft CMS 3.1 或更高版本以及 Craft Redactor 插件 v2.0 或更高版本。

安装

通过插件商店安装。

或者，您可以使用 Composer 下载并安装此插件。

打开您的终端并运行以下命令

# go to the project directory
cd /path/to/my-project

# tell Composer to load the plugin
composer require cbp/redactor-fa-list

# tell Craft to install the plugin
./craft plugin/install redactor-fa-list

添加到 Redactor 字段

将插件包含在位于 config/redactor/Default.json 的 Redactor 配置文件中。为此，在插件数组中添加 "falist"

{
  "buttons": ["html"],
  "plugins": ["fullscreen", "falist"]
}

注意：别忘了在前端包含 Font Awesome。

允许特定的图标和样式

默认情况下，超过 1,000 个 Font Awesome 图标可供选择。如果您想限制作者可以选择的图标，您可以 覆盖设置值。

创建一个新文件 config/redactor-fa-list.php

return [
    'icons' => [
        "heart",
        "star"
    ]
];

如果只提供了一个字符串（如上所示），则默认为 Solid（.fas）样式。要指定样式图标，请使用 键 => 值 对

return [
    'icons' => [
        ["heart" => "fal"], // this will be the Light style
        ["heart" => "fad"], // this will be the Duotone style
        "star", // this defaults to Solid style
        ["creative-commons" => "fab"] // this will be the Brands style
    ]
];

指定版本

由于默认情况下假设仅免费 Solid 样式，因此将加载 Font Awesome CSS 网络字体 以自动在 redactor 字段中显示图标。如果您选择使用其他图标样式或针对特定的 FA 版本，您需要在设置覆盖中包含适当的 CSS 文件

//Using Webfont CDN
use craft\helpers\App;
return [
    'icons' => [
        ["alien" => "fad"],
        ["creative-commons" => "fab"]
    ],
    'styles' => [
        [
            'src' => "https://pro.fontawesome.com/releases/v5.15.3/css/all.css",
            'params' => [
                'integrity' => App::env('FA_INTEGRITY'),
                'crossorigin' => "anonymous"
            ]
        ],
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/brands.min.css'
    ]
];

注意：目前使用 FA Kits 与 redactor 字段存在太多错误，因此在 v1.0.4 版本中删除了支持。然而，尽管您在后台使用网络字体 CDN，但这并不意味着您不能在您的前端使用 FA Kit 脚本 :)