Oh my - that did the trick, thank you so much!
I tried “building” just in the theme component (didn’t work) and “fas-building” in both places (didn’t work) but it didn’t cross my mind to try the plain version in both fields.
I still would suggest to make this differene between fa(s) and fab/far more clear in the component description.
Hello.
Thanks for the great plugin.
I would be grateful if you could provide one support.
I have a Login Required setting on my Discourse.
When I visit a site with this setting, I am naturally asked to create an account or log in, and the header shows an icon that I created with this plugin.
Need account or login page(in Japanese)
If that’s all there is to it, there’s no problem, but if you click on them, you will be able to open the linked page without logging in.
(The link is to a plugin that I created myself, and the Path is a path directly under the site root, such as /test_path. Even with this path, if you specify the URL directly, etc., you will be asked to create an account or log in. Only if you go through the header icon of this plugin, the page will be displayed without login).
The best solution is to not show the icon in the first place, but at the very least, you need to be able to click on the icon to see the page that asks you to log in.
I would really appreciate it if you could help me with a solution. Thank you very much.
Hey @Johani. It looks like this needs to be updated for the new way theme variables work. I see this error in the admin panel:
Error: Undefined variable: "$add-whitespace". on line 14 of common.scss >> @if $add_whitespace == "true" { ----^
Hello,
I’m linking to a limited access page, where I need to pass in some variables to the url. Would it be possible to get some system variables like username, userid, mail etc?
I am looking for the same thing. I want to post the logged-in user’s username to a remote server when the header icon is clicked. I understand that I can get the username via javascript, but I am not sure how I can do so this via a header icon:
<script type="text/discourse-plugin" version="0.8">
const username = api.getCurrentUser().username;
</script>
Thanks!
Just a heads up, I noticed a bug in the Theme Settings instructions.
The top says the order is title, icon, URL, view, target.
But the bottom says the order is title, icon, view, URL, target
The top one is correct, in that URL comes before the view.
See below for screenshot:
I’ve just done a PR for this:
Thank you! I suppose one of these days I’ll learn how and have the courage to do a PR 
Is there a way to indicate the position of the icon? I’m using one custom icon but I have the chat and another theme component icon in the same header and I want to set the custom header icon next to the search icon.
Hello everyone!
Thanks for the awesome Theme Component! Though I’ve run into a bit of an issue: Some Icons work fine, e.g. fa-rocket, but others do not show up, e.g. fa-rocketchat, even though I think I’ve got all the necessary icon classes installed. Any idea what’s causing this? Would really appreciate it 
Also: How can I get regular Font Awesome Icons instead of the solid ones? I tried including far-iconname and fa-regular but that does not seem to work…
Probably due to this
For the first part of your question. I might be wrong but try adding the rocket chat icon to your svg icon subset in site settings.
Unfortunately this does not solve the issue for me.
The Header Link is:
Rocket.Chat,rocket,https://chat.domain.de,vdo,blank
Under Svg Icons in the Theme Component Settings and Svg icon subset in the Discourse Main Settings I have added fa-rocketchat and fa-brands as detailed in the Font Awesome icon description. It is supported since FA version 5.0.0 so that can’t be it…
Anyone got any ideas and might be able to help me out?
You need to:
fab-rocketchat to svg icon subset.Header links to Rocket.Chat,fab-rocketchat,https://chat.domain.de,vdo,blank.The instructions are misleading but, looking back on them, probably not inaccurate:
The difficult part is that you have to convert fab fa-rocketchat (on the Font Awesome website) to fab-rocketchat (on Discourse).
Is there a way to add svg icons that I upload to my site? (Without using the ones from Font Awesome website)
I’m racking my brain over something I don’t know how to solve!
I use the “headset” icon and I can use it normally
but when I want to use the “light headser” icon I can’t use it at all
I’ve already tried with ‘fab-’ ‘fas-’ or ‘far-’ I’ve tried without, I’ve already put the name in the SVG part, I’ve tried everything, but I can’t use it
[image]
the same with the google play store icon, i can’t use it and no way
why does this happen?
It might be that the light version is a “pro” icon:
To use the light style of “headset“, you’ll need a subscription to a Pro-level plan or a perpetual Pro license that includes the specific version of Font Awesome in which this icon (or style) was released.
Would love to know that as well. I want to include a Letterboxd icon (somewhere on the web, such have already been made and proposed to fontawaseome but not accepted)
You can add your own SVG icons with a theme:
How do I put the icons at the bottom of the site (in mobile mode) that appear the same for everyone?
For example: the timeline button appears in the same position for all different models of mobile phones and mobile systems.
Now when I use CSS to leave the header buttons menu at the bottom, in some cell phones they appear in the right position, in others the position appears a little upwards, in others a little to the side, why does this happen?
one more doubt, is there a way for me to place an icon, that when I click on that icon, it opens other options with other icons, as in the example below?