Custom field, path to 'assets/fonts/' from 'assets/css/'?

panelfield
panel
field
css

#1

Hello,

I made a custom field based on the select field, but with the ability to use FontAwesome icons.

To do that I created an assets folder for this custom field, and I put both font awesome fonts and its css in it as such:

assets/
  css/
    font-awesome.css
  fonts/
    FontAwesome.otf
    fontawesome-webfont.eot
    ...

So, the css tries to link the fonts, using a relative path, as such:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0')
  ... 

But, although the relative path is CORRECT, Chrome’s console shows me fonts are being searched for at ‘/panel/fonts/’ instead.

Why?

I am a newbie to custom fields and php in gernal , so if I am missing something basic from either php classses or, maybe, something declared in the original select field class, please let me know and I’ll read my reads.

Thanks!:sparkles:


Font awesome icons as options of a select field
#2

Have you defined the assets in your field class: https://getkirby.com/docs/developer-guide/panel/fields#adding-field-assets?


#3

Yes, that is the only extension I added to the original select field:

<?php

class selectawField extends SelectField {
	static public $assets = array(
		'css' => array(
			'font-awesome.css',
			'style.css',
		),
		'fonts' => array(
			'FontAwesome.otf',
			'fontawesome-webfont.eot',
			'fontawesome-webfont.svg',
			'fontawesome-webfont.ttf',
			'fontawesome-webfont.woff',
			'fontawesome-webfont.woff2',
		)
	);			
}

style.css contains this:

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

More, if I declare css, but I do NOT declare fonts in the field class, the result is the same.

Even more, if I change the relative path in FA css, from:

../fonts/font.xxx

to

font.xxx

Then it looks for the fonts under ‘panel/plugins’ instead of ‘panel/fonts’

Is Kirby hijacking the paths here?

Thanks


#4

I would have thought that the path panel/plugins is correct, as I think this is the one that is used by the js and css files as well, isn’t it? But obviously, the fonts are not loaded. Unfortunately, I couldn’t find any examples plugins that try to load fonts.

Maybe that is just not implemented, @lukasbestle?


#5

@texnixe, sorry I may be misunderstanding, this is not a plugin but a custom field, and so it is placed at ‘/site/fields’

Its assets, at ‘site/fields/assets/css or /fonts’

So, why would the css be redirected to ‘panel/plugins’ ?

Thanks


#6

Have a look at the path of the combined CSS file, I think it does not make any difference if it is a plugin that registers a field or if it is a field in the fields folder.

All registered CSS and JS files of all Panel plugins are combined in a single file at /panel/plugins


#7

Yep, that happens indeed… but not for the fonts it seems. It would be great if someone could explain how to do this.

Meanwhile, a workaround is to place the fonts at ‘/panel/assets/fonts’, and use this path at FA’s css: ‘…/assets/fonts/font.xxx’.

So as the css registers at ‘/panel/plugins’ the relative path will end up looking for fonts at ‘/panel/assets/fonts’.

Ugly, but without errors.


#8

Yes, you can do that, but better make a note of this change so that you can re-add the fonts if you ever update the Panel.


#9

Yep, although If I am right, the panel already comes with FA woff and woff2 files.

Thanks!


#10

Yes, that is correct, the Panel already loads FA fonts, but only woff and woff2, that why I wonder if you need to load these fonts at all.


#11

Actually NO!

I removed FA’s css and fonts, and left only this css:

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

And it DOES work, because as you say, Font Aweome’s fonts and css are already loaded by the panel.

Ok I think this is a solved now.

Thanks @texnixe !


#12

Hi,
I have the same problem but I need my own font files and also a JSON-file.
Both will be searched anywhere in the panel folder and not in the fields folder.
The documentation (https://getkirby.com/docs/developer-guide/panel/fields) says that this files should be stored inside the field folder in assets. Is that wrong?
Something to store inside the panel folders are really bad because it will be overwritten when I update the panel.
So what can I do?

Kind regards,
Jan


#13

Hey @JanStieler ,

In my case the problem was that the css file would attempt to call for the fonts file, and that did not work; Is something like this your case? Because the files declared as below, in the class, DID load:

class ExampleField extends BaseField {

  static public $assets = array(
    'js' => array(
      'script-a.js', // /path/to/field/assets/js/script-a.js
      'script-b.js', // /path/to/field/assets/js/script-b.js
    ),
    'css' => array(
      'styles.css'   // /path/to/field/assets/css/styles.css
    )
  );

  // …

}

Are you doing this aswell or just dropping the files in their folders?


#14

Hi,
I declared the fontfiles in my fields php as asset:

class iconselectField extends SelectField {
static public $assets = array(
	'css' => array(
        'icons.css',
        'style.css',
    ),
    'js' => array(
        'script.js',
    ),
    'json' => array(
        'icons.json',
    ),
	'fonts' => array(
		'icoomoon.eot',
		'icoomoon.svg',
		'icoomoon.ttf',
		'icoomoon.woff',
	)
);

and in the icon.css normal as @font-face:

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/iconmoon.eot');
    src: url('../fonts/iconmoon.eot?#iefix') format('embedded-opentype'),
       url('../fonts/iconmoon.woff') format('woff'),
       url('../fonts/iconmoon.ttf') format('truetype'),
       url('../fonts/iconmoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

Have I understand you right that it is enough to load the font files inside the css?

Cheers


#15

Oh I see,

your case is exactly like mine, you have an CSS that calls some Fonts, both of them in the field assets folder.

Quoting @texnixe

All registered CSS and JS files of all Panel plugins [and fields] are combined in a single file at /panel/plugins

This means that once the panel loads in the browser, all assets should be registered at ‘/panel/plugins’

This happens to CSS. Load the panel and look at ‘dev tools-> sources’ you will see your css IS listed under ‘panel/plugins’

BUT the fonts are NOT. They are not there. So if they are not there, no wonder we can’t point at them from the css, no matter the path we use.

In the custom fields page under “Adding field assets” it clearly shows fonts can be an asset of a custom field.

But to do that we need to point to the font in our css… but we can’t.

I think this should be made clear.

Maybe someone knows where in kirby’s code field assets are loaded and registered?:sparkles:

Thanks


#16

I created an issue on GitHub.


#17

This is now implemented for 2.5.3 on the dev branch.