Dolphiq / Craft3 Iconpicker
Licence: mit
Craft plugin that provides a new field type that offers end users an easy way to pick an icon from a .woff or .ttf font file. You can easily use ionicons or font awesome icons or any other compatible font file.
Stars: ✭ 15
Projects that are alternatives of or similar to Craft3 Iconpicker
Craft Async Queue
Async Queue Handler for Craft 3
Stars: ✭ 80 (+433.33%)
Mutual labels: craftcms, craft3, plugin
Webpack Pwa Manifest
Progressive Web App Manifest Generator for Webpack, with auto icon resizing and fingerprinting support.
Stars: ✭ 447 (+2880%)
Mutual labels: plugin, icons
Qtawesome
QtAwesome - Font Awesome support for Qt applications
Stars: ✭ 430 (+2766.67%)
Mutual labels: font, icons
Devicon
Set of icons representing programming languages, designing & development tools
Stars: ✭ 4,536 (+30140%)
Mutual labels: font, icons
Imager Craft
This plugin has been DEPRECATED. Check out Imager X instead.
Stars: ✭ 351 (+2240%)
Mutual labels: craftcms, craft3
Element Api
Create a JSON API/Feed for your elements in Craft.
Stars: ✭ 493 (+3186.67%)
Mutual labels: craftcms, craft3
craft-recipe
A comprehensive recipe FieldType for Craft CMS that includes metric/imperial conversion, portion calculation, and JSON-LD microdata support
Stars: ✭ 23 (+53.33%)
Mutual labels: craftcms, craft3
Alfred Font Awesome Workflow
🎩 Font Awesome workflow for Alfred
Stars: ✭ 714 (+4660%)
Mutual labels: font, icons
Font Awesome Swift
Font Awesome swift library for iOS.
Stars: ✭ 743 (+4853.33%)
Mutual labels: font, icons
Contact Form
Add a simple contact form to your Craft CMS site.
Stars: ✭ 294 (+1860%)
Mutual labels: craftcms, craft3
Keyrune
Magic: the Gathering set symbol pictographic font
Stars: ✭ 272 (+1713.33%)
Mutual labels: font, icons
Keepass Yet Another Favicon Downloader
Yet Another Favicon Downloader for KeePass 2.x
Stars: ✭ 354 (+2260%)
Mutual labels: plugin, icons
craft-commerce-widgets
Insightful widgets for Craft CMS Commerce stores
Stars: ✭ 33 (+120%)
Mutual labels: craftcms, craft3
Sketch Sf Ui Font Fixer
A Sketch plugin that adjusts the character spacing on text layers using iOS 9's SF UI Text/SF UI Display fonts to what it would be when used in an iOS app.
Stars: ✭ 492 (+3180%)
Mutual labels: plugin, font
Geomate
GeoMate is a friend in need for all things geolocation. IP to geo lookup, automatic redirects (based on country, continent, language, etc), site switcher... You name it.
Stars: ✭ 19 (+26.67%)
Mutual labels: craftcms, craft3
craft-plugin-mix
Helper plugin for Laravel Mix in Craft CMS templates
Stars: ✭ 50 (+233.33%)
Mutual labels: craftcms, craft3
dospaces
DigitalOcean Spaces integration for Craft CMS
Stars: ✭ 31 (+106.67%)
Mutual labels: craftcms, craft3
React Native Make
A collection of everyday React Native CLI tools
Stars: ✭ 606 (+3940%)
Mutual labels: plugin, icons
Iconpicker plugin for Craft CMS 3.x
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.
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
Example of the selection popup
Installation
-
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
Creating a field with the iconpicker field type
- 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
Using the iconpicker field type
- Add the field to a field layout (for example to a section)
- 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:
<span class='{{ entry.iconClass }} myCustomClass'>{{ entry.iconChar }}</span>
Properties of the icon field
-
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 %}
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 [email protected]
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].