Custom field - Font Awesome Icons

For a client I had to create a dynamic field, where he / she can define a custom (Font Awesome) icon: https://github.com/dmotion/kirby-icon

The value of that specific field spits out that particular icon on the website, e.g. in a title, slider or text-field.

So I decided to hook Kirby a little bit; once you enter a (valid) Font Awesome icon in that icon-field, you get a preview of what it will look likeā€¦

1 Like

Thatā€™s great! Could you please post your code/a link to the code so that other users can use this field as well?

I can send you the source-files, and a little setup if you want.

I do have Git(Hub), but I donā€™t have the time to maintain the code, react on bugs / issues / etcā€¦

So I can hand it over ā€œas isā€, if you want?

And maybe place it on a general repository?

Itā€™s also not complete fool-proof; when you enter a non-existing icon, nothing is showed :smile:

It would be nice to have a picker, with all the icons - but I wanted it ā€œquick and dirtyā€, plain and simpleā€¦

And I had some issues after ā€œsavingā€ the page; I donā€™t know exactly what happens, when you press ā€œsaveā€ - but it looks like Kirby is refreshing all items using Ajax, or soā€¦

ā€¦so I had to implement a timer, which refreshes the selected icon-field.

Like I said; it works perfect - for meā€¦ coded it in less than 10 minutes, and I will be happy to hand it over.

Maybe a genius can fine-tune it :smile:

By the way; I also added some custom CSS to the field (not showed in the animation), so a new icon is highlighted for a second, making clear the little thing is visually updated.

You can also simply post the code here in syntax highlighted code blocks (three backticks and the name of the language at the front, three backticks at the end of the block).
Itā€™s fine if the code isnā€™t perfect, but I think it can be a good starting point for other users.

Here you are;

https://github.com/dmotion/kirby-icon

Like I said, itā€™s really a quick implementation of a very basic ideaā€¦

It works for me, so Iā€™m happy with it - but I coded it in less than 10 minutes, so please - donā€™t expect a full-blown Font Awesome Picker Gallery :stuck_out_tongue:

Itā€™s my first custom field (besides the Revolution Slider implementation) - and I created it, copy / pasting an existing field, and modifying it afterwards.

1 Like

Hey you,
Your field is nice, want to use it, but your repo disappearā€¦ can you give the code here ?
Thanks !

That user is no longer active at the forum. @1n3JgKl9pQ6cUMrW should still have the code though as far as I remember.

I am still here :slightly_smiling:

But after the update from Kirby 2.1 to 2.2 most of my plug-ins didnā€™t work any longerā€¦

Some of them I have updated, some of them notā€¦ if you want, I can re-upload the repo once again - but without service :stuck_out_tongue:

Wow This Plugin is Rly Great!!, do you Think you can Post/Release The Source Code?

Thank you @lukasbestle and @1n3JgKl9pQ6cUMrW.
Yes 1n3JgKl9pQ6cUMrW, if you still have the code, I will be very happy to have it !
Even if its not working, I will manage, its just to have the starting point.

https://github.com/1n3JgKl9pQ6cUMrW/kirby-icon

Here you are.

I use this code everyday for my Kirby 2.2 site(s) - so it is working for me :slightly_smiling:

It also works within structured-field modals, and in tabbed-pages.

See screenshot / demo of the icons in actions at this page;

https://github.com/1n3JgKl9pQ6cUMrW/kirby-tabs

Super, thank you ! I will try it