アイコンの置き換えを手伝ってください

サイドバーを開閉するための bars アイコンを、これらの指示に従って置き換えようとしていますが、あまりうまくいっていません。Replace Discourse's default SVG icons with custom icons in a theme

使用したいサイドバーアイコン(プロのFontAwesomeアイコンのためぼかしています)を含むスプライトシートを作成しました。

コンポーネントを作成し、スプライトシートをアップロードしました。

そして、このコードを使用しました(デスクトップでのみ変更したいです)。

しかし、アイコンが表示されません。

何かアイデアはありますか?きっと何か小さくてくだらないことを見落としているのだと思います!ありがとうございます!

ファイル名を小文字にしてみましたか(例:npn_spritesheet.svg)?
そうでない場合、これは機能するはずです(v5アイコンなら簡単にできますが、v6 proアイコンは持っていません)。

それとも、単にこれが原因でしょうか:

サイトロゴの左側にある <span> 要素をインスペクトすると何が見えますか?

例えば、シンボルタグにビューボックスが宣言されていない場合、アイコンが表示されない可能性があります。

「いいね!」 2

奇妙なことに、そのアセットを削除して小文字のバージョンで再アップロードしても(npnassets.svg に名前を変更しました)、古いファイル名が表示されます…

SVGをダウンロードしてスプライトシートに手動で挿入したので、これは問題ではないと思います。v5にはサイドバーアイコンがないため、この方法を選択しました。

「いいね!」 2

SVG要素とネストされたすべての要素を展開して、アイコンコードを表示する必要があります。

「いいね!」 1

スプライトシートのアイコンコードがレンダリングされていません。アイコンのIDをダッシュのない名前(例:npnsidebar)に変更してみてください。テーマの変数名で原因を特定できない問題に遭遇することがありますが、小さな調整で解決することがあります。

それ以外の場合は、SVGファイルを共有してください。実際のコードはピクセル化されているようですが、ライブサイトで使用すると(編集:ああ、プロプランからのものだと気づきませんでした..)公開されることになります。

「いいね!」 1

ありがとうございます。スプライトシートとコードの名前をnpnsidebarに変更したところ、スプライトシートを正しく置き換えることができましたが、残念ながらうまくいきませんでした。作業内容を再確認するために、スプライトシートとSVGをDMでお送りできます。ご協力ありがとうございます!

「いいね!」 2

デフォルトセットの bars アイコンを別のアイコンに置き換えた場合、置き換えは機能しますか?たとえば、cogcomment に置き換えてみてください。

それが機能する場合、問題はカスタム SVG シンボルコードにあります。おそらく viewBox 属性が必要です。カスタムアイコン(gifs テーマコンポーネント用)のように:

「いいね!」 5

デフォルトのアイコン(コードアイコン)にこのように置き換えたところ、昨日機能したので、やはり viewBox 属性の問題だと思います。

「いいね!」 4

いつものように、ペナールさん、ありがとうございました!

「いいね!」 4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.