Rendering icon, not match template configuration

[afabri73]

Hi, the frontend result, not match template configuration.

Configuration

Content Field

Partial View

Frontend result - Icon

Frontend result - Inspector

As you can see in the inspector, the rendered html not match the iconic template configuration I would expect to see <i class="fas fa-briefcase iconTop"></i> Lavorare in OPBG, instead the code also includes again the TAG <i> which I didn't put inside the template: <!-- <i class="fas fa-<i class=&quot;fas fa-briefcase&quot;></i> iconTop"></i> Font Awesome fontawesome.com --> Lavorare in OPBG

Can you help me to understand why isn't rendered only the icon as indicated in the template configuration?

Thank you for the support Adriano

[skartknet]

Hey Adriano, take a lokk at this doc

You don't have to use .Value() You need to use @Html.Raw(Model.Icon) or @Html.RenderIcon(Model.Icon)

EDIT: you can use Value but you need to wrap it in Raw. Iconic returns your icon using the template you configure in the backoffice. It looks like you are only expecting the value of just the actual icon and you duplicating the <i> around it.

EDIT 2: sorry I did;t read the issue properly. I can see Iconic should just render the {icon} template. I have tested and it looks like the template is not updated if you modify it in the backoffice. I needed to restart the site to get the changes. Could that also be your problem? Can you try restarting the site?

[skartknet]

I've released version 5.3.0. That hopefully fixes the problem.

[afabri73]

Hi, thank you for the answer. The problem is that I need to restart website to see the change. I'll update the package to latest version that contain the fix.

A last thing...using Value, and after restarted website, I see correct value of the icon (in my case "fa-briefcase"). I don't need ro wrapped into Html.Raw or Html.RenderIcon Value show the icon name (fa-briefcase)

Problem solved. Adriano

[afabri73]

I've released version 5.3.0. That hopefully fixes the problem.

On Nuget the last updated version is still v5.2.1

[skartknet]

I have release 5.3.0 now.

[afabri73]

Thank you for the update. Tomorrow I'll update it on my project.

Have a good day Adriano

[nickwelsh1]

Thankyou @skartknet and @afabri73 ,

I had the same issue where anything I added to the template around {icon} would not come through to the frontend HTML. Upgrading to 5.3.0 fixed this issue.

A few other things I noticed while testing:

1. From a UX perspective why does "template" and "Enter a backoffice template" operate differently. Would it be good to allow users to specify in the template (used on the frontend) and in the backoffice template?

2. The "Rules source file" field description says "if none selected, it will use the chosen CSS file" and yet it would not let save if this field is empty. This issue also exists in 5.3.0.

3. Tested in Umbraco 11.4.0. Checking installed packages Iconic version lists "unkown".

4. Is it possible to create our own Pre-Configurations?

Issues noticed while trying to get Line-awesome to work in my project.

Thank you for the support, Nick

[skartknet]

Hi @nickwelsh1 ,

1. Not sure if I understand the question. 'Template' is used both in the frontend and backoffice to offer a preview of the icon. If you enter a value on 'Enter a backoffice template', this will override the value on Template and will be used on the backoffice instead. This could be useful for example if you want to rotate the icon in a loop but you don't want to do this on the preview.
2. You're right, I have opened a ticket to fix this. (#41)
3. Weird, I'll take a look. I've tested on v12 and it doesn't even show the Version label.
4. No, it's not possible. But it sounds like a good new feature. (#42)

[nickwelsh1]

Thankyou @skartknet,

I now notice my mistake regarding 1. I hadn't realised we specify the view CSHTML templates differently so that we can use 2x icons in some places and use 3x in others, and add classes.

I wanted to swap from a Line-Awesome divided into sets (accessibility, alerts, animals, arrows, ... ), to a single Line-Awesome all icons, but when I tried I found content authors would have to reselect icons. Usync must remove references so it doesn't seem possible to do a swap.

Have a good day, Nick

[skartknet]

cool, we can close this issue then?

[nickwelsh1]

cool, we can close this issue then?

closing this issue is fine with me.