커스텀 섹션에서 링크 아이콘을 선택하는 방법

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개의 좋아요

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:

2개의 좋아요

Does that work for “normal” users?

2개의 좋아요

I don’t think so, unfortunately. Good point.

3개의 좋아요

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

4개의 좋아요

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개의 좋아요

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:

I believe you can see the core icons here:

3개의 좋아요

To be honest, I thought that’s what I was copying. :slight_smile: I think I grabbed the wrong one…

2개의 좋아요

저도 최적의 아이콘을 찾는 데 고생하고 있으며, Discourse에서 사용할 수 있는 아이콘들로도 많은 어려움을 겪었습니다. 아이콘 관리를 한 곳에서 통합할 수 있는 기능이 절실합니다.

  1. 현재 Discourse에서 사용할 수 있는 모든 아이콘 검색
  2. 모든 아이콘 제공업체의 아이콘 검색 및 Discourse로 원클릭 가져오기 지원

이런 페이지가 꼭 필요합니다.

UX: Let icon pickers search the full icon set - Pull Request #42554 - discourse/discourse - GitHub 의 변경 사항 덕분에 이제 에서 [1]까지 스크롤할 수 있습니다. 이렇게 하면 포럼에서 사용 가능한 모든 아이콘을 확인하고 사이드바에 가장 적합한 아이콘을 선택할 수 있습니다. 새로운, 더 컴팩트한 그리드 피커도 도움이 되는데, 동시에 더 많은 아이콘을 볼 수 있고 검색할 필요가 줄어들어 언어 의존성이 낮아지기 때문입니다.


  1. zoom-join-audio ↩︎

3개의 좋아요