Custom Header Links (icons)

[digitaldominica]

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

[ljpp]

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?

[Arkshine]

Hey,

Are you referring to this Theme component?

Custom Header Links

Summary Custom Header Links allows you to easily add custom text-based links to the header. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-custom-header-links New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Desktop [Capture] Mobile [Capture] (due to very limited space I don’t recommend adding more th…

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.

[joffreyjaffeux]

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

DEV: migrates Header_links setting to an object

It should now be much easier to modify the settings.

[patrickemin]

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.”

[joffreyjaffeux]

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.

[joffreyjaffeux]

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

[patrickemin]

Not at home now will do ASAP

[joffreyjaffeux]

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

[patrickemin]

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:

[Wingtip]

Running 3.5.0.beta2-dev (137e8a0fa0). I’m 14 commits behind.

When I try to update I get an error:

An error occurred: You supplied invalid parameters to the request: The property at JSON Pointer '/1/title' must be present. The property at JSON Pointer '/1/icon' must be present. The property at JSON Pointer '/1/url' must be present.

Any way to fix this?

[Arkshine]

Can you tell us your settings by clicking Settings Editor?

If it’s private, you can PM me.

[Wingtip]

Sent to you, thanks!

[Arkshine]

Just a follow up. As suspected, the migration failed for Wingtip for some reasons. I gave him the correct settings. I wonder in what conditions migrations can fail.

EDIT:

Actually, it did not work at first, so I suggested him the following:

@Arkshine

Can you try the following:

1. You reset the settings, then save.

2. Try to update the component
3. If it works, you import again the correct settings to Settings Editor .

[Wingtip]

Also for some reason it would not accept valid settings; I had to reset the settings, update, then reconfigure with the correct ones. Not a big deal, there wasn’t a ton of config needed. Thanks again for the help!

[icaria36]

@Johani

Sure, there’s a section in this topic about adding custom icons.

Introducing Font Awesome 5 and SVG icons

Hi, I’m not able to render a custom svg icon and I welcome your help identifying what I’m doing wrong.

I have uploaded an svg file to the Default theme:

Then I have added the following to this theme component:

I have used icons-sprite, fa-icons-sprite, and fab-icons-sprite, but the svg doesn’t render. The placeholder is there, one can click it, and the link works, but the rectangle has no icon in it.

The inspector shows this:
<svg class="fa d-icon d-icon-fab-icons-sprite svg-icon svg-string" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="#fab-icons-sprite"></use></svg>

[Arkshine]

I think it should be moved to a new Dev topic.

@icaria36
Can you share the content of Three_asterisks?

The spritesheet follows a specific format.

@Discourse

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="my-theme-icon-1">
    <!--
      Code inside the <svg> tag from the source SVG icon file
      this is typically everything between the <svg> tags
      (but not the SVG tag itself, that's replaced by <symbol> above)
      You can transfer any attributes (i.e. ViewBox="0 0 0 0") to the <symbol> tag
      -->
  </symbol>

  <symbol id="my-theme-icon-2">
    <!-- SVG code here. Add more <symbol> blocks as needed.
      -->
  </symbol>
</svg>

Then, you can use my-theme-icon-1, my-theme-icon-2 as your identifiers.

More information is at Replace Discourse's default SVG icons with custom icons in a theme.