首頁>建站資源>字體下載
下載

Iconpicker插件用於工藝CMS 3.x

目前，該項目已停產。但是，請隨意分叉並繼續開發！

提供了一種新的字段類型的Craft插件，該類型為用戶提供了一種從.woff或.ttf字體文件中選擇圖標的簡便方法。您可以輕鬆使用離子或字體很棒的圖標

注意：當Craft插件商店可用時，此插件可能會成為付費附加組件。

要求

  • Craft 3.0（Beta 20）+
  • PHP 7.0+
  • PHP php字體lib
  • 一個或多個.ttf或.woff文件

例子

CMS用戶模板中字段使用的示例

螢幕截圖

選擇彈出的示例

螢幕截圖

安裝

  1. 與作曲家安裝

     composer require dolphiq/iconpicker

  2. 在設置>插件下的手工控制面板中安裝插件

  3. 通過在模板開始時添加以下行，將插件資產添加到您的應用程序： 

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

  4. 將您想要的字體添加到以下目錄

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

  5. 添加新字段 - 設置>字段>添加新字段時， Iconpicker Field類型將可用

使用IconPicker字段類型創建字段

  1. 選擇Iconpicker Field類型
  2. 使用Iconpicker Field類型添加新字段時，您可以從下拉列表中選擇要用於該字段的字體

使用IconPicker字段類型

  1. 將字段添加到字段佈局（例如，部分）
  2. 您現在可以在創建或更新部分時選擇圖標

在樹枝模板中使用樣本

快速示例代碼

    {% 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字符hex &#xf100 

     {{ entry.fieldName.iconCharHex|raw }}

  5. 將圖標顯示為具有字符和字體類的跨度

     {{ entry.fieldName.iconSpan|raw }}

  6. 獲取圖標字體類

     {{ entry.fieldName.iconClass }}

  7. 僅在設置圖標時顯示圖標的條件示例

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

IconPicker路線圖

  • 選擇並上傳字體中的字體
  • 選擇圖標時啟用（名稱）搜索

貢獻者和開發人員

Lucas Weijers-原始開發人員Johan Zandstra- dolphiq [email protected]帶給您的次要更改

展開
附加信息
相關應用
爲您推薦
相關資訊 全部