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
Note: This plugin may become a paid add-on when the Craft Plugin store becomes available.
- Craft 3.0 (beta 20)+
- PHP 7.0+
- PhenX PHP Font Lib
- One or more .ttf or .woff files
-
Install with Composer
composer require dolphiq/iconpicker -
Install plugin in the Craft Control Panel under Settings > Plugins
-
Add the plugin assets to your application by adding the following line at the begin of your template:
{% do view.registerAssetBundle("plugins\\dolphiq\\iconpicker\\assets\\sharedAsset") %} -
Add the fonts you want to the following directory
/vendor/dolphiq/iconpicker/src/resources-shared/fonts -
The
Iconpicker Fieldtype will be available when adding a new field - Settings > Fields > Add new field
- Choose the
Iconpicker Fieldtype - When adding a new field with the
Iconpicker Fieldtype, you can choose which font you want to use for that field from the dropdown
- Add the field to a field layout (for example to a section)
- You can now choose an icon when creating or updating a section
{% 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:
<span class='{{ entry.iconClass }} myCustomClass'>{{ entry.iconChar }}</span>
-
Get the icon unicode (decimal)
{{ entry.fieldName.icon }} -
Get the icon unicode (hexadecimal)
{{ entry.fieldName.iconHex }} -
Display the icon as html character
�{{ entry.fieldName.iconChar|raw }} -
Display the icon as html character hex
{{ entry.fieldName.iconCharHex|raw }} -
Display the icon as span with character and font class
{{ entry.fieldName.iconSpan|raw }} -
Get the icon font class
{{ entry.fieldName.iconClass }} -
Conditional example of showing icon only when it is set
{% if entry.fieldName.icon %} {{ entry.fieldName.iconSpan|raw }} {% endif %}
- Select and upload the fonts in the UI
- Enable (name) search while picking an icon
Lucas Weijers - Original developer Johan Zandstra - Minor changes Brought to you by Dolphiq [email protected]