ナビゲーションリンクにアイコンを追加する方法

サポート
1

「チャット」の前にFont Awesomeアイコンを追加したいのですが、どうすればよいですか？

image

注: このボタンには Custom Top Navigation Links を使用しています。

2

こんにちは。

デスクトップヘッダーには、次のようなものが考えられます。

ターゲットとなるナビゲーションは、document.querySelector('#navigation-bar li a[href=\"/chat\"]'); の行を正しい a[href=\"...\"] パスにポイントするように変更することで変更できます。

また、iconHTML('comment'); の comment を変更することで、アイコンを変更することもできます。

Screenshot 2022-04-22 at 18.43.45

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange(() => {
    const { iconHTML } = require("discourse-common/lib/icon-library");
    const navItem = document.querySelector('#navigation-bar li a[href="/chat"]');

    let icon = iconHTML('comment');
       
    if (navItem) {
      navItem.insertAdjacentHTML('afterbegin', icon)
    }
  });
</script>
「いいね！」 4
3

いいね！

（少なくとも20文字）

「いいね！」 2
4

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