glyphName doesn't work

[bymayo]

Description

As per your docs ()https://verbb.io/craft-plugins/icon-picker/docs/template-guides/rendering-icons#glyph-name it says to output a glyph when using an icon font you would do:

<span class="fa fa-{{ entry.iconPickerField.glyphName }}"></span>

But this doesn't output anything, and doing a dump for {{ dump(entry.iconPickerField) }} shows glyphName is NULL. Instead there is a css key which outputs the correct handle for the icon:

object(verbb\iconpicker\models\IconModel)#2651 (15) { ["icon"]=> NULL ["sprite"]=> NULL ["glyphId"]=> NULL ["glyphName"]=> NULL ["iconSet"]=> string(16) "font-awesome-all" ["type"]=> string(3) "css" ["css"]=> string(12) "phone-square" ["width"]=> NULL ["height"]=> NULL ["_errors":"yii\base\Model":private]=> NULL ["_validators":"yii\base\Model":private]=> NULL ["_scenario":"yii\base\Model":private]=> string(7) "default" ["_events":"yii\base\Component":private]=> array(0) { } ["_eventWildcards":"yii\base\Component":private]=> array(0) { } ["_behaviors":"yii\base\Component":private]=> array(0) { } }

[engram-design]

What sort of icon source/set are you using? Just wanted to flag that anything glyph related must be a self-hosted icon font (check the docs heading), so just wanted to confirm this first.

Using the remote source from Font Awesome is technically not an icon font (woff, ttf, etc)

[engram-design]

Ah, I can see you're using the remote Font Awesome source. The docs probably don't explain this concept well.

I've added docs to clarify this.

[medoingthings]

Sorry, still not getting it. I render <span class="fa fa-{{ item.iconPicker.css }}"></span>. But where is the built-in Fontawesome registered in the front-end? Am I supposed to reference the cdn-link myself? Then how do I know it matches with the list in the drop-down.

Any hint is much appreciated. Cheers, Mark

[engram-design]

@medoingthings Is {{ item.iconPicker.css }} actually outputting a value? Are you using the remote Font Awesome icon set, or using a custom font?

If you're using a Remote Icon Set then Icon Picker won't output the CSS required, simply because each icon provider has a different means to include them on the page. For instance, Font Awesome (5x) no longer uses a <link rel> element, but encourages you to use Kits and use <script src="https://kit.fontawesome.com/xxxxxx.js" crossorigin="anonymous"></script>. Otherwise, we could potentially automatically register the JS/CSS required to show an icon.

For that reason, the remote sets are there for control panel use for the most part, and when rendering icons on the front-end, you'll want to include the remote set (Font Awesome in this case) as part of your project's site files.

If you really want to include the URL to the remote set, you can use {{ entry.iconPickerField.getRemoteSet().url }}, which isn't overly convenient.

We'll be adding Font Awesome 6x soon, so we'll likely circle back to this issue then.

[medoingthings]

@engram-design it outputs just the css class name of the icon. Meanwhile I went with hosting the font myself.

I was just confused, because in the docs it says "Icon Picker comes built in with Font Awesome 5, but you can also register your own." and in the field configuration you can select Font Awesome with just one click. So my expectation was that it comes "batteries included" so that I can use it in the front-end right away.

Glad to here that you will come back to this when adding Font Awesome 6x.

Keep up the great work, cheers, Mark

[engram-design]

Yep, sorry for the confusion on that. With everyone having a different approach (and opinion) of front-end's these days I certainly took the hands-off approach, but I should clarify it in the docs/features. Regardless, pretty sure it'll all turn on its head with Font Awesome 6x as they don't have a CDN, kits are different, so we'll see.