Substitute Link Icon Only For Sharing

[cogdog (Alan Levine)]

I find this part of the Discourse interface confusing. In the editor, the link icon is used for inserting a hyperlink (well this makes sense, this is what it should be and is the same as 99% of other interfaces)

But in viewing a post the same icon is used for the link/social sharing

when really I find it makes more sense here to be a more familiar share icon

For a while I used the API approach to change the icon

  <script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('link', 'external-link-tab');
 </script>

But then this changes the icon in the editor, so it does not make sense to use a share icon to represent inserting a hyperlink. It would be helpful if there were separate API calls to reference the two contexts for this button, so I could substitute as a share link icon but not an insert link one.

??? (my knowledge of how discourse internally works is mostly shallow)

[Falco]

@cogdog

But then this changes the icon in the editor, so it does not make sense to use a share icon to represent inserting a hyperlink. It would be helpful if there were separate API calls to reference the two contexts for this button, so I could substitute as a share link icon but not an insert link one.

This would require a Discourse change. We would have to duplicate this icon internally while keeping both versions using the same icon by default so downstream users can target each individually to change it.

[cogdog (Alan Levine)]

Once more, I am not looking for an icon! I can use any icon I want on my site.

What I want is a method in discourse, as specified in how to override an icon via the api, to change the button icon for sharing a post without changing the one used in the editor for the insert hyperlink button.

[supermathie (Michael Brown)]

We’re looking at the feasibility of doing exactly that, we agree it would be useful.

[pmusaraj (Penar Musaraj)]

Yep, as soon as the commit below hits tests-passed, you can do what you are looking to do:

https://github.com/discourse/discourse/commit/f6a3c22a898069e6e15a4e220fc12b91eba2e15e

(It might take an hour or so for that to hit tests-passed.)

So I added new IDs for the share icons in the post and topic buttons, so you can isolate them now in the API replaceIcon call, like this:

api.replaceIcon('d-post-share', 'share-square');
api.replaceIcon('d-topic-share', 'share-square');

[cogdog (Alan Levine)]

Thank you thank you! I was just trying to figure out why the class names for the share button icon here on meta were different from our up to date version of discourse.

[cogdog (Alan Levine)]

Saw the change come through and available in updates, and ran it on our site. As a note to anyone else, using the icon requires it be added via admin -> settings -> svg icon subset using fa-share-square

Worked perfectly. Our share icons went from:

to

Thanks again

[cogdog (Alan Levine)]

It’s already done! See post above

Substitute Link Icon Only For Sharing

Yep, as soon as the commit below hits tests-passed, you can do what you are looking to do: (It might take an hour or so for that to hit tests-passed.) So I added new IDs for the share icons in the post and topic buttons, so you can isolate them now in the API replaceIcon call, like this: api.replaceIcon('d-post-share', 'share-square'); api.replaceIcon('d-topic-share', 'share-square'); [image]

I was able to update my discourse hours ago and the new feature is there.

[anon73664359]

That’s interesting. I just tried updating my own Discourse instance and I still don’t see it.

Excuse me while I do some troubleshooting…

[tachibanalolo]

I really love this change. What should I do to change the icon?

[ondrej]

<script type="text/discourse-plugin" version="0.8">
        api.replaceIcon('d-post-share', 'share-square');
        api.replaceIcon('d-topic-share', 'share-square');
    </script>

Just add this to your header when editing a theme

[cogdog (Alan Levine)]

I found there is one more step- you have to make this font-awesome icon available as an svg icon. Otherwise the button is blank after making the header theme adjustments

@cogdog

using the icon requires it be added via admin -> settings -> svg icon subset using fa-share-square

My settings look like this:

[cogdog (Alan Levine)]

The update does not change anything except the class name for the share button icon, so you will not see a difference right away. The default is to keep the same link icon as before (link).

You can tell the update is done if you browser inspect the button and it includes the class d-icon-d-post-share (before the update the class was d-icon-link)

You have to edit your theme header as described here Substitute Link Icon Only For Sharing - #22 by ondrej