Custom Header Links (icons)

Theme component
,
196

Hi, this component works fine however how can the links created get an active class added when it’s links on discourse (same), my default icon items have the active class but not those from the component

1 Like
197

This is a somewhat confusing topic, as the OP is updated as a wiki, but most of the discussion refer to some years old version of the component.

The topic and OP suggests that this supports graphical icons in addition to text links. The Object Settings Editor however does not have a field to define an icon. I tried adding an SVG icon manually:

"icon": "https://foo.svg",

The graphical button does not show up - I get a text link button instead, based on the other parameters of the custom link. The old discussion between this post and the OP suggest that I might need to add something somewhere to enable the SVG icon, but what and where?

199

Hey,

Are you referring to this Theme component?

This Custom Header Links (icons) theme component has no Object setting.

You might want to use this one if you need Header Links with icon support. :+1:

2 Likes
200

Note that I just migrated this component to our new object settings:

It should now be much easier to modify the settings.

2 Likes
201

Hi, trying to update the Custom Header Links component, I get this error: “An error has occurred: You’ve supplied invalid parameters for the request: The property at JSON Pointer ‘/3/url’ must be a valid URL.”

202

Yes I see what could cause this… The schema says url: true and in fact we allow relative URLs, so that’s just a string and considered an invalid URL.

I will look at it.

1 Like
203

Can you show me your component settings please? You can send them in PM if you prefer.

204

Not at home now will do ASAP

1 Like
205

I fixed the problem directly with Patrick in a PM, if anyone is facing the same issue, the problem is that with these new settings the URL check is stricter.

Any URL you fill in setting should be a correctly encoded URL, the simplest solution is to use encodeURI in the console of a browser:

Take this URL for example: “/some-url?title=Foo bar:baz”

encodeURI("/some-url?title=Foo bar:baz")

Will give you:

/some-url?title=Foo%20bar:baz
5 Likes
206

Hi, even though there is no way to reorder the icons, you can do that editing the script by clicking the “Editor” button in the component and reordering the code lines:

image
image1665×810 21.5 KB

1 Like