Harmonizing Discourse icons and emojis

Continuing the discussion from Actions and markup: Icons vs Tags:

From time to time I’m writing documentation for new users and end up typing : to trigger the emoji completion and find the :bookmark: icon, or the :pin: icon, or the :gear: icon to show what to look for to accomplish a certain action. As exemplified with these three: :bookmark:, :pin:, and :gear:, the iconography seems not to be designed for such a use-case. I end up using longer sentence to avoid adding to the confusion of the (usually impressed) users who freshly dived into Discourse.

It seems there’s already a (fastidious) way to Change icons globally using the APIs, but I’m wondering whether there are other options to use Discourse UI icons in posts somehow.

「いいね!」 5

I agree. I often end up taking a screen shot of the icons and paste them in.

「いいね!」 1

I vaguely recall many years ago I had a plugin that did this, it is broken by now, I recommend holding off on this idea till we are done with our fontawesome upgrade, cause once that is done the palate of optional icons becomes enormous making it far more appealing to re-build that old trivial plugin :blush:

「いいね!」 13

Today I discovered Fork Awesome, a fork of the iconic font and CSS toolkit, a fork of Font-Awesome that

  • does not require JavaScript
  • accepts new custom icons
  • is GPL friendly.

Switching from Font Awesome 4.7?

If you were using Font Awesome 4.7, you should be able to just switch to Fork Awesome 1.1 and get all the benefits from it. If you were using npm or composer packages, replace the ones you were using by this Fork Awesome ones. Or if you downloaded a static copy of Font Awesome, download the latest version of Fork Awesome and replace CSS and font files in your project and you should be good to go.

We paid special attention not to change unicode codepoints for the existing icons, nor changed the CSS class names or icon names from Font Awesome 4.7. Though we added a few more icons and made the process of contributing to this project much easier. Though, if you see a mistake, please don’t hesitate to file a bug.

P.S.: and they could use a Discourse :wink:

「いいね!」 4

Good point @erlend_sh maybe we can contact them and suggest they use Discourse :wink:

@hellekin in this upcoming release we are planning to move to all SVG icons for flexibility and away from a specific icon font, it’s a project @awesomerobot is heading up.

「いいね!」 6

They’re pretty low volume so they seem to have what they need with a SO + GitHub setup.

「いいね!」 1

@awesomerobot could you please indicate a link to how-to documentation for this feature?

「いいね!」 1

I think you are probably looking for this component: GitHub - discourse/discourse-icon. There isn’t a corresponding topic for it here on Meta at the moment, but it will work like this in posts:

[wrap=icon id="bookmark"][/wrap]

Other icon resources just in case you are interested:

「いいね!」 7

素晴らしいですね。これが関連トピックだと思います: Discourse Icon

「いいね!」 2

残念ながら、\\faq ページでは機能しません(アイコンの代わりに何も表示されません)。

また、FAQ の投稿に [wrap] アイコンを追加してページを表示すると、通常の投稿のアイコンが表示されなくなります。その後、FAQ の投稿から [wrap] アイコンを削除すると、通常の投稿のアイコンが再び表示されます。

その通りです!見つけてくれてありがとう。

FAQページは技術的には投稿のコンテンツに基づいていますが、特別な設定になっているため、そのコンテキストで機能しないのも無理はありません。

うーん。その動作は再現できません。

FAQページが原因ではなかったかもしれませんが(偶然だった可能性もあります)、目の前で絵文字が消えたり再表示されたりしたのは、確かに2回ありました。

「いいね!」 1