How to choose icons for links in custom section

ux
1

Continuing the discussion from Custom sidebar sections being tested on meta:

I added a personal, custom link section to one of the forums I use often. I prefer to use different icons and not only the default link icon because I can recognize them better that way.

Are there any tips on how to find the best icon? I cannot scroll through the whole list because it is just cut off somewhere. I know I can search there, but how do I know what to search for? - especially when the forum is not in English. But even in an English forum, I could search for ā€œmonitorā€ and find nothing because I would have to search for ā€œdesktopā€ to find the icon I am looking for.
Of course, I can have a look at all the free Font Awesome 5 icons, but then I always have to check whether that icon is available in that forum, and my impression was that most were not. Therefor Iā€™ll miss all the extra icons, which come from discourse.

So how do you expect users to find the fitting icon? Maybe something like the emoji picker would work better. There, searching also only works when you know the correct English name, but you can also find it without by scrolling.

3 Likes
2

I agree; this is not the best experience!

I believe, currently, what you can do is to go to Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome, then add the icon to the svg icon subset setting:

image
image740Ɨ127 4.1 KB

image

2 Likes
3

Does that work for ā€œnormalā€ users?

2 Likes
4

I donā€™t think so, unfortunately. Good point.

3 Likes
5

Iā€™ve been hoping for an ā€˜icon-pickerā€™ for this (and the badges page), but that hasnā€™t caught any traction yet. :frowning:

3 Likes
6

Thatā€™s my problem. I cannot just search for the best icon and add it. I have to find the best available icon, and those depend on which icons were added to the site.

For admins, it makes sense to search all icons because they can find the best and add it. But I would not expect regular users to do that.
It is confusing enough that Discourse offers a search field showing ā€œsearchā€ in your interface language, but the search does not work in that language because the field expects you to enter an English icon name.
So, I think the member-experience is worse than the staff-experience.

1 Like
7

This is a FWIW :slight_smile: But I think this is a list of all the ones ā€˜preloadedā€™ you can pick from by default:

The 'core' icons 
"address-book",
 "adjust",
 "align-left",
 "ambulance",
 "anchor",
 "angle-double-down",
 "angle-double-left",
 "angle-double-right",
 "angle-double-up",
 "angle-down",
 "angle-right",
 "angle-up",
 "archive",
 "arrow-circle-o-right",
 "arrow-down",
 "arrow-left",
 "arrow-right",
 "arrow-up",
 "arrows-alt-h",
 "arrows-alt-v",
 "asterisk",
 "at",
 "award",
 "backward",
 "ban",
 "bars",
 "bed",
 "bell",
 "bell-slash",
 "birthday-cake",
 "bold",
 "book",
 "book-reader",
 "bookmark",
 "bookmark-delete",
 "briefcase",
 "bullseye",
 "calendar-alt",
 "calendar-day",
 "caret-down",
 "caret-left",
 "caret-right",
 "caret-up",
 "certificate",
 "chart-bar",
 "chart-pie",
 "check",
 "check-circle",
 "check-square",
 "chevron-circle-down",
 "chevron-down",
 "chevron-left",
 "chevron-right",
 "chevron-up",
 "circle",
 "clipboard",
 "clock",
 "cloud-upload-alt",
 "code",
 "cog",
 "coins",
 "columns",
 "comment",
 "comment-slash",
 "comments",
 "compress",
 "copy",
 "credit-card",
 "crosshairs",
 "crown",
 "cube",
 "desktop",
 "discourse-amazon",
 "discourse-bell-exclamation",
 "discourse-bell-one",
 "discourse-bell-slash",
 "discourse-bookmark-clock",
 "discourse-compress",
 "discourse-dnd",
 "discourse-emojis",
 "discourse-expand",
 "discourse-other-tab",
 "discourse-sparkles",
 "discourse-threads",
 "download",
 "ellipsis-h",
 "ellipsis-v",
 "envelope",
 "envelope-square",
 "exchange-alt",
 "exclamation-circle",
 "exclamation-triangle",
 "external-link-alt",
 "eye",
 "fab-amazon",
 "fab-android",
 "fab-apple",
 "fab-chrome",
 "fab-discord",
 "fab-discourse",
 "fab-facebook",
 "fab-facebook-square",
 "fab-github",
 "fab-instagram",
 "fab-linkedin",
 "fab-linux",
 "fab-microsoft",
 "fab-patreon",
 "fab-twitter",
 "fab-twitter-square",
 "fab-wikipedia-w",
 "fab-windows",
 "far-bell",
 "far-bell-slash",
 "far-calendar-plus",
 "far-chart-bar",
 "far-check-square",
 "far-circle",
 "far-clipboard",
 "far-clock",
 "far-comment",
 "far-comments",
 "far-copyright",
 "far-credit-card",
 "far-dot-circle",
 "far-edit",
 "far-envelope",
 "far-eye",
 "far-eye-slash",
 "far-file-alt",
 "far-frown",
 "far-heart",
 "far-image",
 "far-list-alt",
 "far-meh",
 "far-moon",
 "far-smile",
 "far-square",
 "far-star",
 "far-sun",
 "far-thumbs-down",
 "far-thumbs-up",
 "far-trash-alt",
 "fast-backward",
 "fast-forward",
 "file",
 "file-alt",
 "file-audio",
 "file-csv",
 "file-image",
 "file-invoice",
 "file-signature",
 "file-upload",
 "file-video",
 "filter",
 "flag",
 "folder",
 "folder-open",
 "forward",
 "gavel",
 "gift",
 "globe",
 "globe-americas",
 "grip-lines",
 "group-plus",
 "group-times",
 "hand-point-right",
 "hands-helping",
 "heart",
 "history",
 "home",
 "hourglass-start",
 "id-card",
 "image",
 "images",
 "inbox",
 "info",
 "info-circle",
 "italic",
 "key",
 "keyboard",
 "language",
 "layer-group",
 "link",
 "list",
 "list-ol",
 "list-ul",
 "lock",
 "magic",
 "map-marker-alt",
 "microphone-slash",
 "minus",
 "minus-circle",
 "mobile-alt",
 "moon",
 "paint-brush",
 "palette",
 "paper-plane",
 "pause",
 "pen-fancy",
 "pencil-alt",
 "play",
 "plug",
 "plus",
 "plus-circle",
 "plus-square",
 "power-off",
 "puzzle-piece",
 "question",
 "question-circle",
 "quote-left",
 "quote-right",
 "random",
 "redo",
 "reply",
 "robot",
 "rocket",
 "save",
 "search",
 "search-minus",
 "search-plus",
 "share",
 "shield-alt",
 "sign-in-alt",
 "sign-out-alt",
 "signal",
 "sliders-h",
 "sort",
 "sort-alpha-down",
 "sort-alpha-up",
 "sort-numeric-down",
 "sort-numeric-up",
 "spell-check",
 "spinner",
 "square-full",
 "stamp",
 "star",
 "step-backward",
 "step-forward",
 "sticky-note",
 "stream",
 "sync",
 "sync-alt",
 "table",
 "tag",
 "tags",
 "tasks",
 "th",
 "thermometer-three-quarters",
 "thumbs-down",
 "thumbs-up",
 "thumbtack",
 "ticket-alt",
 "times",
 "times-circle",
 "tippy-rounded-arrow",
 "toggle-off",
 "toggle-on",
 "trash-alt",
 "undo",
 "unlink",
 "unlock",
 "unlock-alt",
 "upload",
 "user",
 "user-check",
 "user-cog",
 "user-edit",
 "user-friends",
 "user-plus",
 "user-secret",
 "user-shield",
 "user-times",
 "users",
 "wrench"

Well, theoretically at leastā€¦ I have just tried to look for one and not found it, so perhaps itā€™s not 100%. I wonā€™t tell you which so I donā€™t spoil the game. :slight_smile:

8

I believe you can see the core icons here:

3 Likes
9

To be honest, I thought thatā€™s what I was copying. :slight_smile: I think I grabbed the wrong oneā€¦

2 Likes