2017 © Pedro Peláez
 

craft-plugin iconpicker

Craft Iconpicker field type that offers end-users an easy way to pick an icon/symbol from a .woff or .ttf font file.

image

dolphiq/iconpicker

Craft Iconpicker field type that offers end-users an easy way to pick an icon/symbol from a .woff or .ttf font file.

  • Thursday, December 14, 2017
  • by dolphiq
  • Repository
  • 4 Watchers
  • 9 Stars
  • 352 Installations
  • PHP
  • 2 Dependents
  • 0 Suggesters
  • 3 Forks
  • 6 Open issues
  • 6 Versions
  • 43 % Grown

The README.md

Iconpicker plugin for Craft CMS 3.x

Currently the project is DISCONTINUED. However, feel free to fork it and continue its development!

Craft plugin that provides a new field type that offers users an easy way to pick an icon from a .woff or .ttf font file. You can easily use ionicons or font awesome icons, (*1)

Note: This plugin may become a paid add-on when the Craft Plugin store becomes available., (*2)

Requirements

  • Craft 3.0 (beta 20)+
  • PHP 7.0+
  • PhenX PHP Font Lib
  • One or more .ttf or .woff files

Example

Example of the field usage in the template for a cms user

Screenshot, (*3)

Example of the selection popup

Screenshot, (*4)

Installation

  1. Install with Composer, (*5)

    composer require dolphiq/iconpicker, (*6)

  2. Install plugin in the Craft Control Panel under Settings > Plugins, (*7)

  3. Add the plugin assets to your application by adding the following line at the begin of your template:, (*8)

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

  4. Add the fonts you want to the following directory, (*9)

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

  5. The Iconpicker Field type will be available when adding a new field - Settings > Fields > Add new field, (*10)

Creating a field with the iconpicker field type

  1. Choose the Iconpicker Field type
  2. When adding a new field with the Iconpicker Field type, you can choose which font you want to use for that field from the dropdown

Using the iconpicker field type

  1. Add the field to a field layout (for example to a section)
  2. You can now choose an icon when creating or updating a section

Usage sample in twig template

Quick example code

    {% 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>

Display an icon with a custom class:, (*11)

<span class='{{ entry.iconClass }} myCustomClass'>{{ entry.iconChar }}</span>
Properties of the icon field

  1. Get the icon unicode (decimal), (*12)

    {{ entry.fieldName.icon }}, (*13)

  2. Get the icon unicode (hexadecimal), (*14)

    {{ entry.fieldName.iconHex }}, (*15)

  3. Display the icon as html character &#00000, (*16)

    {{ entry.fieldName.iconChar|raw }}, (*17)

  4. Display the icon as html character hex &#xf100, (*18)

    {{ entry.fieldName.iconCharHex|raw }}, (*19)

  5. Display the icon as span with character and font class, (*20)

    {{ entry.fieldName.iconSpan|raw }}, (*21)

  6. Get the icon font class, (*22)

    {{ entry.fieldName.iconClass }}, (*23)

  7. Conditional example of showing icon only when it is set, (*24)

    {% if entry.fieldName.icon %} {{ entry.fieldName.iconSpan|raw }} {% endif %}, (*25)

Iconpicker Roadmap

  • Select and upload the fonts in the UI
  • Enable (name) search while picking an icon

Contributors & Developers

Lucas Weijers - Original developer Johan Zandstra - Minor changes Brought to you by Dolphiq info@dolphiq.nl, (*26)

The Versions

14/12 2017

dev-master

9999999-dev

Craft Iconpicker field type that offers end-users an easy way to pick an icon/symbol from a .woff or .ttf font file.

  Sources   Download

MIT

The Requires

 

by Avatar dolphiq

cms icon symbol craftcms craft-plugin craft iconpicker craft3

14/12 2017

1.0.4

1.0.4.0

Craft Iconpicker field type that offers end-users an easy way to pick an icon/symbol from a .woff or .ttf font file.

  Sources   Download

MIT

The Requires

 

by Avatar dolphiq

cms icon symbol craftcms craft-plugin craft iconpicker craft3

14/12 2017

dev-development

dev-development

Craft Iconpicker field type that offers end-users an easy way to pick an icon/symbol from a .woff or .ttf font file.

  Sources   Download

MIT

The Requires

 

by Avatar dolphiq

cms icon symbol craftcms craft-plugin craft iconpicker craft3

06/10 2017

1.0.3

1.0.3.0

Craft Iconpicker plugin provides a new field type that offers users an easy way to pick an icon from a .woff or .ttf font file.

  Sources   Download

MIT

The Requires

 

by Avatar dolphiq

cms icon craftcms craft-plugin craft iconpicker craft3

03/10 2017

1.0.2

1.0.2.0

Iconpicker

  Sources   Download

MIT

The Requires

 

by Avatar dolphiq

cms icon craftcms craft-plugin craft iconpicker craft3

06/09 2017

1.0.0

1.0.0.0

Iconpicker

  Sources   Download

MIT

The Requires

 

by Avatar dolphiq

cms icon craftcms craft-plugin craft iconpicker craft3