モデレーター用の目アイコン

こんにちは、

また私です。

アカウントを作成し、Watchdog と名付けました。そして、モデレーター権限を付与しました。次に、バッジを作成し、moderators と名付けました(設定で目のアイコンを指定しました)。このバッジを Watchdoggo に付与したところ、doggo が投稿する際に盾と目のアイコンの両方が表示されます。

設定では目のアイコンを指定しているのに、表示されるのは盾です。

盾のアイコンを削除する方法を教えてください。

まず、新しいグループ「watchdog」を作成し、ユーザー Watchdog を追加して、それをプライマリグループに設定してください。その後、以下のコードを実行します。

.group-watchdog .d-icon-shield-alt {
    display: none;
}

そのユーザーはすでに「Moderators」グループに所属していますので、別のグループを作成する必要はないと思います。コードを

.group-moderators

に変更しましたが、機能せず、アイコンはそのまま残っています。

そのアイコンに関係する CSS を見つけました。しかし、display: none を適用すると、アイコンは確かに消えますが、その間に隙間が残ってしまいます。その隙間(黄色の矢印)を除去したいのです。

.svg-icon-title svg.fa.d-icon.d-icon-shield-alt.svg-icon.svg-node {
    display: none;
}

この隙間を消すためのヒントはありますか?

あるいは、CSS を使って盾のアイコンを目のアイコンに置き換える方法はありますか?盾のアイコンに関係するクラスは CSS ではなく、HTML に埋め込まれているためです。

これはいかがでしょうか?

.moderator .svg-icon-title {
    display: none;
}

あなたのアイコンの HTML については把握していないため、予期せぬ影響が出る可能性もあります…

また、この方法もお試しください。@Nisutec さんはこれで成功しました:

その通りです。すべてのモデレーターから削除したい場合、group-moderators はクラスではなく、単に moderator です。ただし、その場合 moderator は不要で、単に

.d-icon-shield-alt {
    display: none;
}

とすればよいでしょう。
ギャップはおそらく

.names span {
    margin-right: 8px;

によるものです。なので、

.moderator .names span {
    margin-right: 0;
}

とすれば解決します。

これで完璧に動作し、隙間がなくなりました。どうもありがとうございます。