README

为 SilverStripe 4 添加 Font Awesome 6.x 图标选择器。此版本使用 Fontawesome 6.2.0 的 CDN。此版本与 Fontawesome 6.2.0 pro 兼容（但您需要拥有套件的副本）。

使用免费版 Font Awesome

开始时体积较小： 扩展后允许您搜索所需的图标： 您最近切换的图标列表：

使用专业版 Font Awesome

专业版提供免费版的所有功能，同时增加了更多选项。

启用后，Light 和 Duotone 图标样式被解锁：

切换到专业版时，默认启用清晰的图标：

要求

• SilverStripe 4.x 或 5.x

安装

安装仅支持通过 composer

composer require buckleshusky/fontawesomeiconpicker

• 运行 dev/build?flush=all 重新生成清单

使用

只需像平时一样将字段添加到 DataObject 或页面，这样就会将 Font Awesome 图标的类信息保存到 dbfield，以便在前端使用。

use BucklesHusky\FontAwesomeIconPicker\Forms\FAPickerField;
use SilverStripe\ORM\DataObject;

class TestDataObject extends DataObject
{
    private static $table_name = "TestDataObject";

    private static $db = [
        'FAIcon' => 'Varchar(255)',
    ];

    public function getCMSFields()
    {
        $fields = parent::getCMSFields();

        $fields->addFieldToTab(
            'Root.Main',
            FAPickerField::create('FAIcon', 'Font Awesome Icon\'s Name')
        );

        return $fields;
    }
}

如果需要，您可以将以下内容添加到您的 PageController 或任何扩展 PageController 的页面控制器。这可以添加到下面的 init() 方法中

protected function init()
{
    parent::init();

    // get the requirements to render fontawesome icons
    $this->fontAwesome();
}

备注

该字段尚未在前端使用的情况下进行测试。

设置

启用 Font Awesome Pro 要启用 Font Awesome Pro，请将以下内容添加到您的 yml 文件中。将 all.min.css 和 sharp-solid.min.css 替换为 Font Awesome Pro css 名称。这些文件应位于您主题的 css 文件夹中。

# settings for FontawesomeIcons
FontawesomeIcons:
  # unlocks pro mode - onkly use this if you are using Font Awesome pro
  unlock_pro_mode: true
  # the location of the icon-families.yml from fontawesome
  icon_yml_location: 'app/fontawesome/icon-families.yml'
  #the pro css for fonts
  pro_css: 'all.min.css'
  # only use one of the following to get your sharp css
  pro_sharp_css: 'webfonts/fontawesome/css/sharp-solid.min.css' # not needed if sharp is disabled
  # the folder where all the sharp-*.css are located
  pro_sharp_css_folder: 'webfonts/fontawesome/css/' # not needed if sharp is disabled
  # disable generating icons on dev build
  disable_generate_on_build: false # this is false by default

选项

如何设置 fontawesome 的专业版？

• 您需要从 fontawesome 网站 下载一个套件。
• 获取 all.min.css 和 sharp-[x].min.css 的 css 文件（其中 x 是不同的清晰版本）并将其放置在您主题的 css 文件夹中。
• 获取 webfonts 文件夹并将其放置在您主题的文件夹中。例如 themes\simple。
• 更新您的配置

  FontawesomeIcons:
      unlock_pro_mode: true
      # the location of the icon-families.yml from fontawesome
      icon_yml_location: 'app/fontawesome/icon-families.yml'
      # the css of all and sharp-solid
      pro_css: 'webfonts/fontawesome/css/all.min.css'
      # not needed if sharp is disabled
      pro_sharp_css_folder: 'webfonts/fontawesome/css/'

• 将 icon-families.yml yml 文件放置在您网站的 app 文件夹中。在此示例中，它将放置在 app/fontawesome/icon-families.yml。
• 执行 dev/build 或，如果您已禁用它，运行以下任务 dev/tasks/generate-font-awesome

如何使用Fontawesome的新版本？

• 获取一份icon-families.yml文件。
  • 您可以从他们的github获取。
  • 对于专业版，您在从Fontawesome下载专业版时将获得此文件。
• 将此文件放置在您的网站应用文件夹中。
• 更新icon_yml_location以指向yml文件夹，例如app/fontawesome/icon-families.yml
• 对于免费版，您可以选择执行以下操作
  • 将以下内容添加到您的yml中，从CDN获取您想要的版本

  FontawesomeIcons:
    free_css_cdn_version: '6.3.0'

• 对于专业版
  • 按照上述步骤进行如何设置Fontawesome的专业版？

更新内容

• 切换到使用FontawesomeIconsListCustom yml配置以防止图标重复
• 点击现在允许您选择类型
• 当您点击一个系列时，类型按钮将被筛选，仅显示您可用的内容
• 添加了对显示逻辑的支持
• 添加了对所有尖锐图标的支持，而不仅仅是尖锐实心图标
• 分页不再在选择家族/类型时记住页面
• 当您展开字段时，它将获取家族并切换到适当的选项卡
• 更新了文档

未来

• 重新添加删除图标的功能
  • 暂时移除以清理并发布
• 添加添加您自己图标的文档
• 动态生成样式类型