カスタムヘッダーリンク(アイコン)

以下の返信は、現在削除された投稿に対するもので、内容は以下の通りでした。私自身も FA5 アイコンに興味があります…

このプラグインを使ってまだアイコンを追加できますか?もう動作しなくなっているため質問しています。Facebook、Twitter、Instagram を追加する必要があります。

ここには SVG アイコンのオプションがありません:[スクリーンショット]

以前は正常に動作していましたか?何が変更され、どのような対処を試みましたか?

もしかすると、アイコン非対応版のこのプラグインをダウンロードしていませんか?

Font Awesome 4 のアイコンは動作させられましたが、Font Awesome 5 は(組み込みの 2〜3 個を除き)動作しませんでした:上記の私の投稿を参照してください。

はい、実際にはアイコンなしバージョンをダウンロードしていました。調査してそのことに気づきました。現在、discourse-icon-header-links で動作しています。

素晴らしいですね。ご使用の設定を共有していただけないでしょうか?私のどこが間違っていたのか確認するために試してみたいのです。ありがとうございます。

はい、こちらです:- Screenshot by Lightshot

Facebook, fab-facebook, https://www.facebook.com/, vdo, blank
Twitter, fab-twitter, https://www.twitter.com/, vdo, blank
Instagram, fab-instagram, https://www.instagram.com/, vdo, blank

お役に立てれば幸いです :slight_smile:

「いいね!」 1

どうもありがとうございます。これら3つの組み込みアイコンも、私にとって機能しました。

もし可能であれば、他のFA5のアイコンをお試しになり、その結果を教えていただけますでしょうか。

LinkedInを試しましたが、問題なく動作しました:Screenshot by Lightshot

FA5 アイコンを追加する場合は、SVG アイコンセクションで使用する各アイコンに FontAwesome 5 のアイコンクラスを含めることを忘れないでください:Screenshot by Lightshot

ありがとうございます!

「いいね!」 1

本当にありがとうございます。fab 以外のアイコンでも機能しますか?

いいえ、fab- がなくても動作しませんでした。

もし間違っていたら申し訳ありませんが、これは正しくないかもしれません。

例えば、Address Card Icon | Font Awesome のアドレスカードアイコンを使用するには、far fa-address-cardfar-address-card に変更し(そしてそれを svg icon subset 設定に追加する必要があります)、単に fa- を除くだけでは機能しません。

このことに気づいたのは、FEATURE: Update Font Awesome to v5.4.1 and SVGs by pmusaraj · Pull Request #6557 · discourse/discourse · GitHubFEATURE: Update Font Awesome to v5.4.1 and SVGs by pmusaraj · Pull Request #6557 · discourse/discourse · GitHub を確認した後のことです。

「いいね!」 1

既存のヘッダーリンクを削除する方法はありますか?

インストールできました。
次に、このアイコン Rocket Icon | Font Awesome を車両カテゴリへのリンクと一緒に表示したいと考えています。
以下のように設定しました:

Mobile desktop link, fas-rocket, c / vehiculos / 69, vdm, blank

そして下に fas-rocket と記述しました。

しかし、アイコンが表示されません。アイコンをどのように表示すればよいでしょうか?

「rocket」だけで試してみてください。

この推測は、FEATURE: Update Font Awesome to v5.4.1 and SVGs by pmusaraj · Pull Request #6557 · discourse/discourse · GitHub で「rocket」という単語を検索した結果に基づいています。

「いいね!」 3

ありがとうございます、このアイコンは利用可能でしょうか?

手動で追加する必要があるかもしれません。私には少し難しいです。
この方法でよろしいでしょうか?

プラグイン内: plugins/your-plugin-name/svg-icons フォルダに SVG スプライトファイルを配置するだけです。開発環境であればサーバーを再起動し、Docker コンテナの場合はサイトを再ビルドすれば、カスタムアイコンが自動的に利用可能になります。

Digital Ocean を使用しており、何も知らない人が、フォーラムにマスクアイコンを追加する方法を要約して教えていただけないでしょうか?よろしくお願いいたします。

フォラムで試しにアイコンの1つを一時的に変更してテストしました。header links でアイコン名を「rocket」(引用符なし)で指定すれば、アイコンは表示されます。もし表示されない場合は、行の他の部分に問題がある可能性があります。svg icons に追加する必要はありません。

「いいね!」 1

はい、ありがとうございます。ロケットは完璧に動作しました。ただ、今度はこれを追加したいのですが:

申し訳ありません。元のアイコンを指していると思い込んでいました。劇場のアイコンはコードに記載されていないため、機能しません。

Font Awesome 5 のアイコンを追加しようとあれこれ試しましたが、うまくいきませんでした。ここでの提案はどれも私の環境では機能しませんでした。

svg icons に何を追加しても変化がありませんでした。特に、比較的新しい投稿で言及されている Instagram のアイコンはコードに含まれているため、svg icons に追加されたからではなく、コードに含まれているために機能しているのだと思います。

「いいね!」 1

このコンポーネントに関するセキュリティレポートが届きました。rel="noreferer, noopener" コードを使用して設定することは可能ですか?

「いいね!」 1

Discourse の最新バージョンに更新後、アイコンが表示されなくなりました。考えられる原因は何でしょうか?

「いいね!」 2

これを当インスタンスに追加したところ、大変素晴らしい結果となりました。このプラグインをありがとうございます!

新しいアイコンと既存のデフォルトアイコンの間に余白を追加する設定は可能でしょうか?現在は ,,,, を追加することで擬似的に実現していますが、デフォルトではテーマ設定ページへのリンクになってしまいます。ただ、見た目は私たちが望む通りです。
Screen Shot 2021-05-20 at 13.22.40

「いいね!」 3

それは素晴らしいですね :+1:

もちろん、ここに追加しました(デフォルトはオフ)

設定から空の設定を削除し、コンポーネントを更新して新しい設定を切り替えると、ページをリフレッシュした後に動作し始めるはずです。

「いいね!」 5