cpradio
(cpradio)
December 24, 2018, 2:47am
#54
I disagree. You can simply create a copy of your theme, remove the script tag, click preview and see what broke. The rest of your members see a functional site as you work to resolve the issues. This gives them the impression of stability while you are only aware of the underlying issues at hand.
I spent more time than I’d like to admit to fix our instance (SP) which is hosted, it was definitely more than 1-2 hours and some of the fixes were not obvious. In some places you had to set width and heights both on the object and in the svg, along with figuring out coloring, etc. It took time. Sure I got it done, but I also used a “preview” theme to ensure I didn’t make the experience worse for anyone else in the meantime.
7 Likes
Troid92:
Where I was coming from is that upgrading my skin from FA4 will take me more than 1-2 hours, and it arrived as a surprise fire to put out immediately. This is why I found a way to delay that fire by a week, and suggested possible solutions like an in-app heads-up next time. I am sorry if the tone of my first post was colder than I intended – it was meant to be constructive.
As long as it is really a temporary fix, that’s fine. This did not come across to me in your original post, though.
7 Likes
sarahann
(Sarah)
January 10, 2019, 7:28pm
#56
Using icons in your handlebars templates
pmusaraj:
{{d-icon ‘user-times’}}
Is there any way to specify the size of the icon in the handlebars code (eg: size=‘2x’ )? or should we do this in CSS?
pmusaraj
(Penar Musaraj)
January 10, 2019, 7:39pm
#57
You would have to specify the size in CSS. The d-icon
helper can take a title parameter, but not a style or size parameter.
4 Likes
sarahann
(Sarah)
January 10, 2019, 7:44pm
#58
Wonderful! thanks so much
1 Like
sarahann
(Sarah)
January 11, 2019, 1:09am
#59
I was hoping to replace a Discourse icon with a custom one. Would there be a way to register my custom icon in Discourse somewhere? ie)
register_svg_icon “my-icon” as <svg>...</svg>
then be able to
api.replaceIcon(‘heart’, ‘my-icon’);
7 Likes
pmusaraj
(Penar Musaraj)
January 11, 2019, 2:08am
#60
That’s a nice idea, we should support adding a custom icon in this fashion. We currently don’t. I’m going to look into it in more detail in the next few days.
12 Likes
pmusaraj
(Penar Musaraj)
January 12, 2019, 3:32pm
#61
Ok, adding custom icons in a plugin should now be doable as of
https://github.com/discourse/discourse/commit/47cbfb14989bcf828c66b211827cb9355214e71a
So, basically, add the SVG sprites to your plugin, in plugins/svg-icons
. See https://raw.githubusercontent.com/discourse/discourse/master/vendor/assets/svg-icons/discourse-additional.svg for an example. Next, register your icon, and you should be good to go.
(I would prefix the icon ids in the plugin, to avoid any potential clash with FontAwesome icon names.)
18 Likes
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>
.
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?
1 Like
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…
11 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 )
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…
2 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
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
3 Likes
Does this mean that Discourse still ships with Font Awesome even though it uses SVG icons ?
Font Awesome is itself SVG in V5
1 Like
So v 2.2 does come with FA pre loaded ? I thought you skipped it for its size.
You should check our release topic to know more about included features in version 2.2. Also the blog post .
3 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!