fa_iconpicker - 左子网

字体很棒的图标 选择器

FONT的图标选择器很棒的5.x和6thx 。

IconPicker连接到文本输入字段。单击时，选择器小部件将打开。然后将当前设置软件包的图标动态充电。通过设置到选择器小部件中的线条和列，选择器可以计算出滚动时应从服务器中充电哪一侧。这样可以防止浏览器过载，从而确保液体导航。

具有适当授权的用户可以在附加组件的管理区域上载几个字体很棒的软件包，然后选择作为标准软件包而作为输出首选的软件包。

该插件具有当前版本的免费软件包。如果Pro软件包有相应的许可证，则可以上传和使用。

注意：FONT AFACY还提供桌面软件包供下载。如果上传这些，则不会集成包装池。出现相应的错误消息。

Picker小部件集成在<body>标签的末端，并在打开时绝对位于相关的输入字段下。这样可以确保特殊的布局（Flex，Grid等）不受Picker小部件的影响。

当前软件包的字体资源也加载在后端。有关包含在前端的内容，请参见下面。

特征

包裹
- 用当前免费包装交付
- 支持专业和免费包装
- 支持子集（请参阅https://fonta**weso*me.com/how-to-use/on-the-desktop/other-topics/subsetter），带有特殊标记（包装概述中的蓝色“ S”）
带有相关设置页面和多功能适应选项的复杂选择器请参阅“调整”
在目标字段（输入类型= text或textarea），初始化的设置与标准设置不同
选择器功能（所有可调）：
- 搜索Name ， Label ， Code ， Search Terms
- 可观的预览样式
- 多重选择
- 补充样式级别（ fat ， fal ， far ，Fas， fas ， fad ， fab ）
- 活动
- 选择返回值（ Name ， Code ， ID ， Label ， SVG-Code ）
- 活动处理程序
- 通过REX API类查询数据
mbblock支持

整合字体在前端很棒

必须将以下代码插入模板的<head>区域中，以使字体很棒的CSS输出<link>标签。注意：只有直接在模板中起作用，而不是随附！

 REX_ fa_iconpicker []

在后端使用采摘器

通过指定rex-fa-iconpicker类，在文本输入字段中初始化了选择器。模块输入。

 < input type =\" text \" class =\" form-control rex-fa-iconpicker \" />

另外，您可以使用JavaScript进行初始化，如下（在此实例的特殊设置的示例中）：

 let fap = new FAPicker (
    document . getElementById ( \'<ID_OF_INPUT_OR_TEXTAREA>\' ) ,
    {
        \'multiple\' : true ,
        \'add-weight\' : false
    }
) ;

您可以在初始化之后访问Picker实例：

 let fap = $ ( \"#<ID_OF_INPUT_OR_TEXTAREA>\" ) . get ( 0 ) . FAPicker ;

默认情况下，单击它后，请立即打开选择器，并在选择图标或单击弹出窗口右上角的关闭按钮X后立即关闭。

调整

可以通过特殊应用程序属性对选择器的功能和外观进行调整。如果相应的授权，许多设置通常可以调整。

这些设置是通过HTML属性直接在输入字段上的Scheme data-fa-X=\"VALUE\"属性进行的。 Picker弹出窗口中6个图标列的示例：

 < input type =\" text \" class =\" rex-fa-iconpicker \" data-fa-columns =\" 6 \" />

所有设置都一目了然：

rows – 选择器小部件中的行
columns – 选择器小部件中的列
offset – 在重新加载时也加载和渲染的拾音器小部件中的页面（例如，1列和5行的偏移量不仅意味着加载20个图标（1页，4 * 5），还意味着60-1页，然后再进行60-1页）
max-pages – 性能设置；确定在拾取器小部件中可以加载多少页
weight-selector拾音器小部件边缘上的Shows样式选择[0，1]
movable – 使Picker小部件可移动，在移动按钮上双击以重置[0，1]
通过图标， details-on-hover – 鼠标，显示了一个具有更多信息的复杂工具提示，并在允许的字体中显示图标（请参阅weights ）[0，1]
close-with-button – 仅使用Picker小部件右上方的关闭按钮明确执行[0，1]
multiple – 允许多个选择[0，1]
weights – 可用字体作为连贯的字符串（t =薄，l = light，r =常规，s = solid，d = dutotone，b = brand），例如。 ldb将Light，Duotone和Brand Icons的预览进行多样化，如果add-weight = 1是
add-weight – 选择图标时，不仅添加图标的名称（例如fa-user ），还会添加当前设置的字体（示例结果：如果选择solid字体，则fas fa-user ）[0，1]
preview-weight – 选择图标时，不仅会添加图标的名称（例如fa-user ），还会添加当前设置的字体（示例结果：如果选择solid字体， fas fa-user ）[0，1]
选择图标（标准： name ）[ name ， label ， icon ， svg ]时将在目标字段中输入的insert-value
sort-by定义图标的排序（选项： id ， name ， label ， code ， createdate ）
sort-direction – 定义排序方向（ asc或下降的desc ）
icons – 定义批准选择的图标列表；允许占位符* （例如question,user*,*virus*,*-up -extirical邀请图标question ，所有以user开头的图标，所有在某处包含virus图标以及所有结尾的图标-up ）
hide-search选择器弹出窗口头的搜索字段是隐藏的[0，1]
hide-latest-used的用过的图标保存在cookie中；在“最后使用”部分中，最多显示了2行；如果将字段设置为1，则该部分隐藏在小部件[0，1]中
class ，该类附加到拾音器小部件的极端包装元素以进行您自己的调整
icon-class -CSS类附加到图标按钮上以进行您自己的调整
在将图标选中到关联的输入字段之前的时间为onbeforeselect -event处理程序（ return false可防止插入输入字段，第一个函数参数是触发按钮对象，第二个参数是目标对象）
onselect -event处理程序已将图标被选中到关联的输入字段之后的时间（第一个函数参数是图标的名称，第二个参数已删除标志，第三参数the Target对象）
onbeforeshow – 事件处理程序：显示小部件之前| 1。参数：ziel-feld作为dom-object
onshow事件处理程序：显示小部件后| 1。参数：ziel-feld作为dom-object
onbeforehide – 事件处理程序：隐藏小部件之前| 1。参数：ziel-feld作为dom-object
onhide事件处理程序：隐藏小部件后| 1。参数：ziel-feld作为dom-object

未来计划 /待办事项

直接在初始化位置选择子集（覆盖标准软件包）
REX API返回的扩展点（完全可能吗？）
通过文本字段中的图标值在鼠标上进行预览叠加>显示当前设置的图标的外观，而无需打开picker
可能在.css文件中操纵WebFont-url，以便输入正确的绝对路径。这将使FE中的“更优雅”的集成在不披露软件包数据的位置（通过带有URL参数的index.php）的位置