Custom Header Links (icons)

this is such a finicky plug-in to get to work, i’m trying to get the fa-bolt-lightning icon to do the same function as the comments icon (/latest). i have tried every combination of fab-bolt-lightning or fas-bolt-lightning or fa-bolt-lightning, or just bolt-lighting in both the header link fields and the svg icon selection box. all i ever get is the link with no icon. literally maddening.

1 Like

This component uses the older icon set so it would be bolt :+1:

1 Like

I’m trying to use the user-headset Font Awesome icon, which is available starting from Font Awesome 5.7.0, but it doesn’t show up.

Instead of the

Include FontAwesome 5 icon classes for each icon used in the list.

message on the plugin configuration page, it’d be nice to feature the exact Font Awesome version used by the plugin.

On a related note, please update to the latest Font Awesome version with the next plugin release.

the user-headset is a pro-icon so you need the pro subscription. if you are wanting to use the free one it’s headset.

2 Likes

one word of advice for this component. watch how many icons you put up there on the header in mobile view because it will get bottled up quickly with the login and sign up buttons as well as the site logo. for example, if you just put 2 icons up there with this component, it will be very crowded in mobile view and may push menu buttons off screen and shrink your site logo. i actually prefer the no icon cleaner look and only use this component for placing one additional icon on the header for my mobile users who asked for it.

3 posts were split to a new topic: How to create a dynamic header link?

In a similar vein, I have hidden the icons on mobile for the same reason. But it does leave you with no links on mobile, which kind of sucks.

1 Like

This looks great on desktop but agree it gets crowded on mobile
Is there any way to have the mobile links be input as a footer instead of a header? Maybe that would help diminish clutter for mobile users.

This component is broken after the last update, together with al least 5 other theme components. This causes major problems right now.

There have been a few reports of Custom Wizard being a factor. Do you have it installed by any chance?

1 Like

That did the trick: thank yo very much for the quick response!

1 Like

What are people doing about moving away from the old Twitter logo to “X”? It’s not looking like the new X brand icon will be added to Font Awesome 5 at the moment :frowning:

4 Likes

Thank you @Moin - that works (and in terms of using it in the Custom Header Links component only the first step is needed if you then specify this icon as the one to use in the component settings)

I test to add icon globe but don’t work

How can i do that ? Globe Classic Solid Icon | Font Awesome

What did you put into the header links setting? I just tried globe icon title,globe,https://fontawesome.com/v5/icons/globe,vdm,blank and that worked

Additionally, if you don’t see it, you can add globe to svg_icons setting to ensure it will be displayed.

I think the documentation might be a little confusing.

By default, it uses fab-twitter and fab-facebook (valid) in the settings. The screenshot shows them without fab-, and the documentation says to remove any fab- (which is not entirely correct since there are some valid icons with fab- and far-). :thinking:

It’s true for me all icon is fab-discord and works I test without fab and work thank’s :slight_smile:

2 posts were split to a new topic: Custom header icons disproportionate to core header icons

Is there any placeholder/variable for the current page/URI that the user is on and render it in the Header Link?

In our case, we would like to add a link to our staging that opens the exact same page.

Example: when a user is on forum.xyz/admin/site_settings page, then the button link would lead to stagingforum.xyz/admin/site_settings

1 Like