Fontawesome 6 pro - mnot showing some icons..

[wmdhosting]

Question

I have created Fontawesme 6 pro kit.. and all icons shows well in picker field.. but just some on front end.. any idea what can be..

I use code like this in templates.. <i class="{{ item.icon.value }}"></i>

example

Additional context

Craft Pro 4.3.5 Iconpicker 2.0.12

Is there a way to use local FontAwesome 6 PRO folder if over API some issues..

[engram-design]

Can you show me the raw HTML output from your template code <i class="{{ item.icon.value }}"></i>? I'm not sure what you're doing on your front-end to render the icons, but that's outside of the responsibility of Icon Picker (you're on your own when rendering on the front-end).

If it's rendering a SVG element, then you must be doing something in your front-end to change that from a <i> element. From your output, looks fine to me (the rendered SVG element has all the right attributes).

You can always download the Font Awesome Pro icons as SVGs and use those, if you prefer to not use the CDN/Kits.

[wmdhosting]

thx, seems there ws some css rules issue..

[wmdhosting]

Just update. ..

for some reason.. Fontawesome icons are not icluded from plugin..

Just when i uploaded them localy. and added direct link in template to fontawesome folder.

then all worked OK

[engram-design]

Just to confirm, you're using a Font Awesome 6 pro kit? What happens when you try to pick an icon - just none are shown in the icon picker dropdown? Any JS errors?

[wmdhosting]

Yes. for pro Kit . Icons are shown in admin.

But not on frontend..

THen i uploaded them localy and added
<link href="[/icon-picker/fontawesome-pro-6.1.1-web/css/all.css rel="stylesheet">

Then icons shows OK:. on frontend But from docs i thinked that all icons are served from plugin .

[engram-design]

If we're talking about the front-end, we don't do anything with Font Awesome. This plugin is purely for the control panel, and being able to pick an icon. The value of the field when you've picked an icon will just be the CSS name (for Font Awesome), and it'll be up to you to load in whatever you need to render them. This is because there's so many different front-end setups, we can't hope to cater for them all. People may also like to build icons into their build process.

Any other icon type like SVG, spritesheets or fonts have helpers, but for Font Awesome kits, you'll use it as you would normally

[wmdhosting]

OK: will be great to add info to docs as how all its done we get impression no need to add anything manually that all go from settings

I paid some developer +10 hours to make that work. but didnt worked until we added link like this

[wmdhosting]

How to stop fontawesome to convert to svg.

I have i tags in template.. but all icons convert to svg in source

[engram-design]

I'm not sure what you mean, sorry. As I mentioned before, when using a kit from Font Awesome, the only value you get from the field is the CSS name of the icon. It's up to you to render this on your front-end however you require.

For example, I pick this icon from a Font Awesome 6 Pro Kit icon set.

In my templates:

{{ entry.iconPickerField }}
{{ entry.iconPickerField.value }}

// Both have the same value of `fas fa-anchor`

But Icon Picker won't load the Font Awesome kit for you, you'll need to do that yourself. Do this according to the Font Awesome docs. It should look similar to:

<script src="https://kit.fontawesome.com/xxxxxxx.js" crossorigin="anonymous"></script>
or
<link rel="stylesheet" href="https://kit.fontawesome.com/xxxxxxxxxx.css" crossorigin="anonymous">

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

[wmdhosting]

Just in case you need it. or someone i found solution.. The problem was I was loading fontawesome both via CSS and JS calls. When I removed the call to the JS lib and only called the CSS file, the icons rendered properly.

That stoped auto SVG conversion..

[wmdhosting]

i found one more things..
If on page is FORMIE contact form. with Rich fields enabled in text area....

Icons are auto converted to SVG too. and not shown.. becuse of this rich-text.js

It show for 1-2 seconds. then turn to mising icon.

When i turn OFF Rich fields. all OK..

[engram-design]

Right, that's probably more a Formie issue where it's not compatible with Font Awesome if you load it yourself (the rich text field's buttons also use Font Awesome for icons).