Substitute Link Icon Only For Sharing

UX
1

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)

link-edit
link-edit1266Ă—122 12.5 KB

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

share-link

when really I find it makes more sense here to be a more familiar share icon 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)

4 Likes
5

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.

12

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.

1 Like
13

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

14

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
image1828Ă—864 49.4 KB

6 Likes
16

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.

3 Likes
17

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:

share-link-0

to

share-new
share-new706Ă—198 11.2 KB

Thanks again

5 Likes
19

It’s already done! See post above

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

3 Likes
20

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… :slight_smile:

21

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

22 
<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

3 Likes
23

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

My settings look like this:

svg icon subset
svg icon subset1330Ă—372 38.5 KB

1 Like
24

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)

share-meta
share-meta1426Ă—126 60.3 KB

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

1 Like
25

This topic was automatically closed after 2 days. New replies are no longer allowed.