アイコンを追加してテキストを減らす

貢献 UX
1

このプラグインは素晴らしいです！プラグインのことは詳しくないので、自分で派生させる方法はわかりませんが、Discourse には素敵な「シンプルさ」を感じます。画像やアイコンのサポートがあれば最高でしょう。

ここでは、Discord のアイコンを実現した「安上がりな（ghetto）」方法を紹介します：

image
image281×100 5.1 KB

（色飽和は除きます——HDR スクリーンショットのバグは最悪です）

image

インストール後、新しい CSS コンポーネントを作成するか、テーマを直接編集します：

以下が私が使用したコードです——

.headerLink
{
    color: white;
    
    &.d
    {
        background-image: url('https://i.imgur.com/MSef433.png');
        background-repeat: no-repeat;
        background-size: 22px;
        
        a
        {
            color: rgba(0, 0, 0, 0);
            text-decoration: none;
            &:hover
            {
                box-shadow: 0px 2px lightgray;
            }
        }
    }
}
  • ホバー効果に問題があったため、これらはユニコードではなく画像であるため、ホバー時に下部にボックスシャドウを適用するのが私のベストでした：

image

  • 上記の例を d と名付けました。何らかの名前が必要だからです。フォントの不透明度を 0 にして隠していますが、d によって d クラスを利用できます。

  • これを実現する方法はありますか？おそらくあります。しかし、より良い方法が現れるまでの「安上がりな」アイデアの実現方法としては、これがベストです :slight_smile:

「いいね！」 2
2

まず第一に、これはプラグインではなく、テーマコンポーネントです。ユーザーが混乱してプラグインのようにインストールしようとする前に、これを明記する方が良いと思います。

二つ目の点ですが、なぜメニューにアイコンを追加する目的に、Custom Header Links (icons) ではなく、このテーマコンポーネントを使用するのでしょうか？:open_mouth:

「いいね！」 6
3

ええと、それが私がコンポーネントとして作成しなかった理由です──まだ用語に慣れていないので。

おそらく、あの「楽なリンクインストール」コンポーネントの一覧に表示されるほど「クール」ではないからでしょうね ;D テキストリンクがあるなら、アイコンも欲しいものです！かなり素敵に見えます。今すぐ試してみます。

編集: 完璧に動作しました。

「いいね！」 3