# Custom field - Font Awesome Icons **URL:** \ **Category:** Solutions\ **Tags:** v2\ **Created:** [October 17, 2015, 12:04pm UTC](https://forum.getkirby.com/t/custom-field-font-awesome-icons/2241 "2015-10-17T12:04:51Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![anon68757951](https://avatars.discourse-cdn.com/v4/letter/a/f475e1/32.png) [@anon68757951](https://forum.getkirby.com/u/anon68757951)\ **Post date:** [October 17, 2015, 12:04pm UTC](https://forum.getkirby.com/t/custom-field-font-awesome-icons/2241/1 "2015-10-17T12:04:51Z")
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](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_… ![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/9/97bb1a81126d4498d392090340beaf50406800e9.gif) ---
**Author:** ![lukasbestle](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/lukasbestle/32/11437_2.png) [@lukasbestle](https://forum.getkirby.com/u/lukasbestle)\ **Post date:** [October 17, 2015, 2:25pm UTC](https://forum.getkirby.com/t/custom-field-font-awesome-icons/2241/2 "2015-10-17T14:25:10Z")
That’s great! Could you please post your code/a link to the code so that other users can use this field as well? ---
**Author:** ![anon68757951](https://avatars.discourse-cdn.com/v4/letter/a/f475e1/32.png) [@anon68757951](https://forum.getkirby.com/u/anon68757951)\ **Post date:** [October 17, 2015, 3:36pm UTC](https://forum.getkirby.com/t/custom-field-font-awesome-icons/2241/3 "2015-10-17T15:36:59Z")
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 😄 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 😄 _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._ ---
**Author:** ![lukasbestle](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/lukasbestle/32/11437_2.png) [@lukasbestle](https://forum.getkirby.com/u/lukasbestle)\ **Post date:** [October 17, 2015, 5:08pm UTC](https://forum.getkirby.com/t/custom-field-font-awesome-icons/2241/4 "2015-10-17T17:08:27Z")
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. ---
**Author:** ![anon68757951](https://avatars.discourse-cdn.com/v4/letter/a/f475e1/32.png) [@anon68757951](https://forum.getkirby.com/u/anon68757951)\ **Post date:** [October 17, 2015, 6:49pm UTC](https://forum.getkirby.com/t/custom-field-font-awesome-icons/2241/5 "2015-10-17T18:49:49Z")
Here you are; **[https://github.com/dmotion/kirby-icon](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** 😛 It’s my first custom field (besides the **[Revolution Slider](https://forum.getkirby.com/t/get-variable-image-source-on-the-front-end/2238/)** implementation) - and I created it, copy / pasting an existing field, and modifying it afterwards. ---
**Author:** ![pierre](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/pierre/32/1517_2.png) [@pierre](https://forum.getkirby.com/u/pierre)\ **Post date:** [January 8, 2016, 3:55pm UTC](https://forum.getkirby.com/t/custom-field-font-awesome-icons/2241/6 "2016-01-08T15:55:46Z")
Hey you, Your field is nice, want to use it, but your repo disappear… can you give the code here ? Thanks ! ---
**Author:** ![lukasbestle](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/lukasbestle/32/11437_2.png) [@lukasbestle](https://forum.getkirby.com/u/lukasbestle)\ **Post date:** [January 8, 2016, 3:58pm UTC](https://forum.getkirby.com/t/custom-field-font-awesome-icons/2241/7 "2016-01-08T15:58:40Z")
That user is no longer active at the forum. @1n3JgKl9pQ6cUMrW should still have the code though as far as I remember. ---
**Author:** ![1n3JgKl9pQ6cUMrW](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/1n3jgkl9pq6cumrw/32/2368_2.png) [@1n3JgKl9pQ6cUMrW](https://forum.getkirby.com/u/1n3JgKl9pQ6cUMrW)\ **Post date:** [January 8, 2016, 5:23pm UTC](https://forum.getkirby.com/t/custom-field-font-awesome-icons/2241/8 "2016-01-08T17:23:37Z")
I am still here 🙂 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 😛 ---
**Author:** ![simon2017](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/simon2017/32/7442_2.png) [@simon2017](https://forum.getkirby.com/u/simon2017)\ **Post date:** [January 8, 2016, 5:27pm UTC](https://forum.getkirby.com/t/custom-field-font-awesome-icons/2241/9 "2016-01-08T17:27:26Z")
Wow This Plugin is Rly Great!!, do you Think you can Post/Release The Source Code? ---
**Author:** ![pierre](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/pierre/32/1517_2.png) [@pierre](https://forum.getkirby.com/u/pierre)\ **Post date:** [January 8, 2016, 6:59pm UTC](https://forum.getkirby.com/t/custom-field-font-awesome-icons/2241/10 "2016-01-08T18:59:39Z")
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. ---
**Author:** ![1n3JgKl9pQ6cUMrW](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/1n3jgkl9pq6cumrw/32/2368_2.png) [@1n3JgKl9pQ6cUMrW](https://forum.getkirby.com/u/1n3JgKl9pQ6cUMrW)\ **Post date:** [January 8, 2016, 7:02pm UTC](https://forum.getkirby.com/t/custom-field-font-awesome-icons/2241/11 "2016-01-08T19:02:52Z")
**[https://github.com/1n3JgKl9pQ6cUMrW/kirby-icon](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 🙂 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](https://github.com/1n3JgKl9pQ6cUMrW/kirby-tabs)** ![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/f/fbb81897559dcd82f3fe18b2d8b65c5e51c24437.png) ---
**Author:** ![pierre](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/pierre/32/1517_2.png) [@pierre](https://forum.getkirby.com/u/pierre)\ **Post date:** [January 8, 2016, 7:04pm UTC](https://forum.getkirby.com/t/custom-field-font-awesome-icons/2241/12 "2016-01-08T19:04:57Z")
Super, thank you ! I will try it ---
**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\ **Post date:** [February 6, 2025, 5:03pm UTC](https://forum.getkirby.com/t/custom-field-font-awesome-icons/2241/13 "2025-02-06T17:03:47Z")