html - 如何使用 select2 显示 fontawesome v5 pro uesing

Question

我正在尝试列出所有 Fontawesome v5 pro 图标供用户使用 select2 库从中选择一个。
我找到了这段代码（但它仅适用于 v4 且仅免费）：

HTML：

 <div class="form-group">
   <label class="form-label font-medium-1 " for="menu_item_icon"> Menu Item Icon</label>
   <seletc id="menu_item_icon" name="threads-icon" class="fa-select"> </seletc>
</div>

JQ：
调用这个 yaml脚本之后

$.get('https://raw.githubusercontent.com/FortAwesome/Font-Awesome/fa-4/src/icons.yml', function(data) {
    var parsedYaml = jsyaml.load(data);
    var options = new Array();
    $.each(parsedYaml.icons, function(index, icon) {
        options.push({
            id: icon.id,
            text: '<i class="fa fa-fw fa-' + icon.id + '"></i> ' + icon.id
        });
    });
    $('#menu_item_icon').select2({
        placeholder: 'Select an option',
        dropdownAutoWidth: false,
        width: '200px',
        data: options,
        escapeMarkup: function(markup) {
            return markup;
        }
    });
   
});

输出是： https ://i.ibb.co/JFhQN7n/image.png

所以我想做的是：

1. 像代码一样显示来自 v5 pro 而非 v4 的所有图标。
2. 添加第二个下拉列表，让用户选择他想要的样式（Solid、Regular、Light、Duotone 或 Brands），并将其反映在第一个列表中显示的图标上。
3. Fontawesome v5 pro 没有 .yml 文件。

任何人都可以帮助我吗？在此先感谢。

PS：我有 Fontawesome pro 许可证。

标签： htmljqueryyamlfont-awesomejquery-select2