CSSでd-iconアイコンを変更する

開発
1

こんにちは皆さん！

Discourse Follow のスタイリングを行っていたところ、以下の部分の変更を検討し始めました。

button[aria-label="Follow"] または button[aria-label="Following"]

CSS でアイコンを変更できる方法をご存知でしょうか？もし可能であれば、「user-plus」（フォロー）から「user-check」（フォロー中）へとアイコンを切り替えられるようになります。

Screen Shot 2020-11-13 at 11.56.36
Screen Shot 2020-11-13 at 11.56.36138×108 726 Bytes

Screen Shot 2020-11-13 at 11.54.03
Screen Shot 2020-11-13 at 11.54.03934×336 16.2 KB

ご協力をお願いします！

よろしくお願いいたします、
フェリペ

【編集（解決策）】
やったー！ user オブジェクト参照 を操作しました。

{{follow-toggle icon=(if user.following 'user-check' 'user-plus') user=user}}

Screen Shot 2020-11-13 at 12.07.31
Screen Shot 2020-11-13 at 12.07.31696×248 11.8 KB

皆さん、ありがとうございました！

4

@feabila、素晴らしいアイデアですね。

それほど素晴らしいので、その一部をすでにリポジトリにコミットしました：

https://github.com/paviliondev/discourse-follow/commit/2609657fc4e155ea1d1f6ddb74ac2600a46eeaa0

いいですね！: +1: :tada:

実際には、機能面ではあなたの提案通り維持しますが、既存の Computed Property を活用して簡略化します：

https://github.com/paviliondev/discourse-follow/commit/6bcdebb40fea0233ac4b46548ccc720bc263c08c

もし代替実装に興味があれば、ぜひご確認をお願いします。

では、よろしくお願いいたします！