dolphiq/iconpicker

此包已被 放弃 并不再维护。没有建议的替代包。

创建图标选择器字段类型，为最终用户提供从.woff或.ttf字体文件中选择图标/符号的简单方法。

维护者

详细信息

github.com/Dolphiq/craft3-iconpicker

源代码

问题

安装次数: 13,870

依赖者: 1

建议者: 0

安全性: 0

星标: 16

关注者: 5

分支: 11

公开问题: 10

类型：craft-plugin

1.0.5 2018-08-07 09:44 UTC

Requires

MIT 0f51aea99bb7e05df0717720dc1329b35e7acf99

cmsiconCraftsymbolcraftcmsiconpickercraft-plugincraft3

This package is not auto-updated.

Last update: 2024-08-27 17:05:30 UTC

README

目前项目已 停止。但是，欢迎分叉并继续其开发！

Craft 插件，提供一种新字段类型，让用户可以轻松地从.woff或.ttf字体文件中选择图标。您可以轻松使用 ionicons 或 font awesome 图标

注意：当 Craft 插件商店可用时，此插件可能成为付费附加组件。

要求

  • Craft 3.0 (beta 20)+
  • PHP 7.0+
  • PhenX PHP Font Lib
  • 一个或多个.ttf或.woff文件

示例

在 CMS 用户模板中使用字段的示例

Screenshot

选择弹出窗口的示例

Screenshot

安装

  1. 使用 Composer 安装

    composer require dolphiq/iconpicker

  2. 在 Craft 控制面板的“设置”>“插件”下安装插件

  3. 通过在模板开头添加以下行将插件资产添加到您的应用程序

     {% do view.registerAssetBundle("plugins\\dolphiq\\iconpicker\\assets\\sharedAsset") %}

  4. 将您想要的字体添加到以下目录

     /vendor/dolphiq/iconpicker/src/resources-shared/fonts

  5. 当添加新字段时，Iconpicker 字段类型将可用 - 设置 > 字段 > 添加新字段

创建具有图标选择器字段类型的字段

  1. 选择 Iconpicker 字段 类型
  2. 添加具有 Iconpicker 字段 类型的新字段时，您可以从下拉菜单中选择为该字段使用哪个字体

使用图标选择器字段类型

  1. 将字段添加到字段布局中（例如，添加到部分）
  2. 现在，当创建或更新部分时，您可以选择图标

在 twig 模板中的使用示例

快速示例代码

    {% do view.registerAssetBundle("plugins\\dolphiq\\iconpicker\\assets\\sharedAsset") %}
    <html style="padding: 0; margin: 0;">
    <head>
        <title></title>

        {{ head() }}

    </head>

    <body>

    {{ beginBody() }}

    {% if entry.iconPickerField.icon %}
        Hex: {{ entry.iconPickerField.icon }}<br>
        {{ entry.iconPickerField.iconSpan|raw }}
    {% endif %}

    {{ endBody() }}

    </body>
    </html>

显示具有自定义类的图标

<span class='{{ entry.iconClass }} myCustomClass'>{{ entry.iconChar }}</span>
图标字段属性

  1. 获取图标 Unicode（十进制）

    {{ entry.fieldName.icon }}

  2. 获取图标 Unicode（十六进制）

    {{ entry.fieldName.iconHex }}

  3. 将图标作为 html 字符 &#00000 显示

    {{ entry.fieldName.iconChar|raw }}

  4. 将图标作为 html 字符十六进制 &#xf100 显示

    {{ entry.fieldName.iconCharHex|raw }}

  5. 将图标作为带有字符和字体类的 span 显示

    {{ entry.fieldName.iconSpan|raw }}

  6. 获取图标字体类

    {{ entry.fieldName.iconClass }}

  7. 条件示例：仅当图标已设置时显示图标

    {% if entry.fieldName.icon %}
     {{ entry.fieldName.iconSpan|raw }}
{% endif %}

Iconpicker 路线图

  • 在 UI 中选择和上传字体
  • 在选择图标时启用（名称）搜索

贡献者 & 开发者

Lucas Weijers - 原始开发者 Johan Zandstra - 些小改动 由 Dolphiq 提供 info@dolphiq.nl