jimmyfc23
(jimmyfc23)
January 19, 2019, 6:18am
62
Just thought I’d post how I got these working with html after reading closely through the thread. (I would say in future to let everyone know in the original thread about the new system settings to get icons going on headers etc).
To add some icons go to /admin/site_settings/category/all_results?filter=icons
and add the prefixes accordingly. “Add additional FontAwesome 5 icons that you would like to include in your assets. Use prefix ‘fa-’ for solid icons, ‘far-’ for regular icons and ‘fab-’ for brand icons.”
Eg fa-newspaper
.
Then reference them in your html. Eg <svg class="fa d-icon d-icon-newspaper svg-icon svg-node" aria-hidden="true"><use xlink:href="#newspaper"></use></svg>
.
1 Like
tshenry:
Hey @LKNickname , try this out:
const { iconNode } = require("discourse-common/lib/icon-library");
api.decorateWidget("header-icons:before", helper => {
return helper.h("li", [
helper.h(
"a#globe-button.icon",
{
href: "https://www.website.com/",
title: "Back to website"
},
iconNode("globe")
)
]);
});
That worked so well I’d like to add a second button. I naively tried:
<script type="text/discourse-plugin" version="0.4">
const { iconNode } = require("discourse-common/lib/icon-library");
api.decorateWidget('header-icons:before', helper => {
return helper.h('li',
[
helper.h('a#home-button.icon', {
href:'https://docs.google.com/spreadsheets',
title: 'Spreadsheet'
}, iconNode('table')),
helper.h('a#home-button.icon', {
href:'https://google.com',
title: 'Google'
}, iconNode('globe')),
]
);
});
</script>
But that gave a weird alignment:
How can I make the globe vertically aligned with the rest of the buttons?
3 Likes
dax
(Daniela)
January 21, 2019, 8:50am
64
There is a well-maintained theme component to use that is already updated to works with FA5 and that add more than 1 button before the header icons:
This is a theme component that will allow you to add linked icons to the Discourse header easily.
Screenshots
Desktop
[Capture3]
Mobile
[Capture]
This component includes a theme setting that allows you to add as many links as you want, determine their icons, and decide which devices they show up on!
[Capture4]
The pattern for links is as follows:
Title,Icon,URL,View,Target
Title is… well…the title you want the link to have.
URL is where you want the user to go when they click. Incl…
12 Likes
Can I have some help?
I have previous registered a couple of extra icons:
api.decorateWidget('header-icons:before', helper => {
return [
helper.h('li', [
helper.h('a#home-button.icon', {
href: '/',
title: 'McRides Home'
}, helper.h('i.fa.fa-home.home-button-icon.d-icon')),
]),
helper.h('li', [
helper.h('a#weather-button.icon', {
href: 'https://www.mcrides.co.nz/t/weather-forecast/77',
title: 'Weather Forecast'
}, helper.h('i.fa.fa-cloud.weather-button-icon.d-icon')),
])
];
});
I can see in this thread how I would redo this (or I’m not that skilled probably this )
1 Like
Steven
February 3, 2019, 9:16pm
66
The theme component introduced just before will help you do it really easily
This is a theme component that will allow you to add linked icons to the Discourse header easily.
Screenshots
Desktop
[Capture3]
Mobile
[Capture]
This component includes a theme setting that allows you to add as many links as you want, determine their icons, and decide which devices they show up on!
[Capture4]
The pattern for links is as follows:
Title,Icon,URL,View,Target
Title is… well…the title you want the link to have.
URL is where you want the user to go when they click. Incl…
But if you really want to do it manually, the first post of this #howto will help
This feature is now available as a dedicated theme component .
Want to add a new link right next to search icon on header? Follow below steps:
Add this JavaScript code to your site theme
Go to Admin
Customize
Themes
Select the theme you wish to customize
Edit CSS/HTML
</head>
<script type="text/discourse-plugin" version="0.4">
const { iconNode } = require("discourse-common/lib/icon-library");
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
h…
3 Likes
how do i
add the icon to the svg icon subset
site setting
Here’s what I’ve got:
api.decorateWidget('header-icons:before', helper => {
return [
helper.h('li', [
helper.h('a#home-button.icon', {
href: '/',
title: 'McRides Home'
}, iconNode('home')),
]),
helper.h('li', [
helper.h('a#weather-button.icon', {
href: 'https://www.mcrides.co.nz/t/weather-forecast/77',
title: 'Weather Forecast'
}, iconNode('cloud-sun')),
])
];
});
the home icon works, the cloud-sun (I also tried cloud) doesn’t
1 Like
Steven
February 4, 2019, 1:58am
68
Search for the setting svg icon and type the name of the icon with the right prefix
fa-cloud
or fa-cloud-sun
and it should work after a refresh of the page
4 Likes
Does this mean that Discourse still ships with Font Awesome even though it uses SVG icons ?
1 Like
Font Awesome is itself SVG in V5
3 Likes
So v 2.2 does come with FA pre loaded ? I thought you skipped it for its size.
1 Like
You should check our release topic to know more about included features in version 2.2. Also the blog post .
5 Likes
I read it. It says about dropping the font icon.
We’ve also fully converted to SVG icons instead of relying on a font icon. This is more efficient than shipping a giant and mostly unused icon font . Plus, it’s now much easier to switch any visible icon in Discourse with something else, even a completely custom one-off glyph that you created.
Prefer to use your custom logo instead of the default like heart? Make it so!
1 Like
Yes, we moved to SVG icons instead of fonts. But that doesn’t mean we skipped Font Awesome .
4 Likes
I see. So you are using FA as SVG images ? I never knew we can extract them individually.
1 Like
Thanks !
I didn’t even know it was there
1 Like
Chi_Duc
(NDC)
February 12, 2019, 9:07am
77
Anybody can help?
I need to replace this code to svg:
<i class="fa fa-long-arrow-left" aria-hidden="true"></i>
Thank you so much!
1 Like
tshenry
(Taylor)
February 12, 2019, 9:27am
78
That specific icon has been removed from the list of free font awesome icons. The closest equivalent is long-arrow-alt-left
. If you are limited to using HTML, you would use:
<svg class="fa d-icon d-icon-long-arrow-alt-left svg-icon svg-node" aria-hidden="true">
<use xlink:href="#long-arrow-alt-left"></use>
</svg>
You will also need to add long-arrow-alt-left
to the svg icon subset
site setting.
9 Likes
Chi_Duc
(NDC)
February 12, 2019, 9:49am
79
Thanks @tshenry
You are so awesome
I tried to use long-arrow-alt-left
, it worked well.
But can you tell me more if I still want to use long-arrow-left
.
1 Like
tshenry
(Taylor)
February 12, 2019, 9:58am
80
Unfortunately, as I mentioned above, that icon is not available in the free tier of Font Awesome icons. If long-arrow-alt-left
will not work for you, I think your best option might be to create your own version and use a plugin as described in the post above .
9 Likes
Chi_Duc
(NDC)
February 12, 2019, 10:17am
81
oh, I see
Thanks @tshenry so much!
2 Likes