Font awesome icons as options of a select field

The CMS Questions
1

Is it possible to populate a select field with icons, for example font awesome icons if they are already avaiable in kirby perhaps?

Thank you

2

Short answer: yes (but I’m not sure this really answers your question…)

Edit: not a select, but something like this could be an alternative, as a list of all FA icons could get pretty long: https://github.com/jenstornell/kirby-plugins/issues/125

3

Should be possible: https://jsfiddle.net/14606fv9/2/

1 Like
4

Thank you both!

The specific case is that I have a structure field which holds in each entry a text, a link, and an icon.

On the page I list and link each text, along its icon.

There will be only 4 icons: text, video, sound and external link. So I do not really need the custom field you suggest, @texnixe (although it looks awesome)

My blueprint:

adds:
    label:  links
    type:   structure
    entry: >
      {{text}} + {{url}} + {{icon}} 
    fields:
      text:
        label:  text
        type:   text
      url:
        label:  url
        type:   url
      icon:
        label:  icon
        type:   select
        options:
          fa-file-text-o: txt
          fa-volume-up : snd
          fa-video-camera: vid
          fa-external-link: ext

And I am showing it as such:

<?php 
  foreach($page->adds()->toStructure() as $add):
?>

  <i class='fa <?= $add->icon()->html() ?>'></i> 
  <a href='<?= $add->url()->html() ?>'><?= $add->text()->html() ?></a> 

<?php
  endforeach;
?>

Which works to show the icons in the page, but in the panel they need to be selected by name.

That is not bad, but could be better.

I’ve tried @Svnt’s approach, using the icon codes (which I did not know I could use) in either side of the select field option list, with or without quotes, as such:

  icon:
    label:  icon
    type:   select
    options:
      &#xf0f6;: txt
      fa-volume-up : &#xf028;
      '&#xf0f6;': txt
      fa-volume-up : '&#xf028;'

…but none of these seem to work (not surprisingly some actually break field options).

Any suggestion?

Thank you!

5

I think it want work in the backend because the select field is missing the font awesome CSS class. (font-family).

Maybe you can try it with a custom field (a copy of the select field) with some custom CSS?

But i’ve never made a custom field with custom CSS untill now. Just check some other fields on GITHUB… maybe there are some fields with custom CSS.

Or just modify the rendering of the field and use inline CSS.

6

I am not yet comfortable enough with kirby or php as to attempt a custom field, but I will try soon.

Meanwhile what you said lead me to attempt addiing the font-awesome css to my config file as to make it available to the panel, as mentioned here.

That did not work tho :frowning: for reasons related to how FA works. Possible workarounds are described in this SO post but they may actually involve modifying the css that affects the select field, which I am not sure that can be done without modifying the field itself, ergo: custom field.

If I attempt modifying the css for the field in any way I’ll come back and update this. Meanwhile I’ll keep selecting by text.

Thanks!

7

I did, once, create this plugin - https://github.com/1n3JgKl9pQ6cUMrW/kirby-icon

icons.gif1056×228 246 KB

Dunno this is what you want.

1 Like
8

Not exactly @1n3JgKl9pQ6cUMrW but it will be helpful as an example when I start to fiddle with custom fields, thank you!

9

Font Awesome Select Codepen

Stackoverflow

10

Thanks for this solution!

11

The codepen icons does not work on Chrome Android on Honor 8. Maybe it’s not required. Just wanted to let you know.

12

Nor on iPhone iOS 10 (and some more chars)…

13

I think I’ve got it.

I extended the select field, as per these instructions.

Created its assets folder, and added a style.css file, and font awesome css to the css folder + font awesome fonts to the fonts folder.

I then linked both css files as assets to the extended field. This is the full php field file:

<?php

class selectawField extends SelectField {
	static public $assets = array(
		'css' => array(
			'font-awesome.min.css',
            'style.css',
	    )
	);			
}

Then, in style.css, more or less followig advice from this SO answer I gave fontawesome to the ‘option’ element /edit and also to the ‘select’ element’ edit/ as such:

select, option {
	font-family: 'FontAwesome';
	font-style: normal;
}

Now, adding something like this to a blueprint, does actually show the icon in the dropdown select menu on the panel /edit and also on the select menu once it drops back up edit/ :smiley: at least on chrome

icon:
  label:  icon
  type:   selectaw
  options:
    '&#xf270;': '&#xf270;' 
    '&#xf0f9;': '&#xf0f9;'

How about this solution?

Thank you!

/edit, just por completeness, alhough it works this solution seems to create a console warning regarding the path from the FA css to the FA fonts ; I moved the issue to a different question for clarity here, edit/

2 Likes
14

This seems to work ! … but not on OSX or ios as — in my understanding — they don’t support webfonts in select… a cross platform / device solution may require a more complex solution I guess.

Nevertheless, thanks for this : )

1 Like