# カスタムヘッダーリンク（アイコン）

**URL:** https://meta.discourse.org/t/custom-header-links-icons/86307
**Category:** Theme component
**Tags:** official, custom-header-icons
**Created:** [2018 年 4 月 27 日午後 2:00 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307 "2018-04-27T14:00:38Z")
**Posts on this page:** 1
**Showing post:** 93

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [2020 年 8 月 5 日午後 1:41 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/93 "2020-08-05T13:41:28Z")

</div>

> [@MichelleBarnett](#):
>
> でも、LinkedIn がまだ表示されません

LinkedIn の場合は、この設定でアイコン名として `fab-linkedin` を使用できます。

 ![setting for links](https://global.discourse-cdn.com/meta/original/3X/b/9/b90806863496f1203843757d03c169c9868b4e5d.png)

ただし、そのアイコンは Discourse が使用するデフォルトのアイコンセットに含まれていないため、コンポーネントの別の設定にも追加する必要があります。

 ![setting for extra link icons](https://global.discourse-cdn.com/meta/original/3X/b/1/b1f6853f1d5b6f4ce3030736bab7d14f33baa462.png)

私の環境では、結果は以下のようになります。

 ![linkedin icon](https://global.discourse-cdn.com/meta/original/3X/6/c/6c49eb73bc65a6ad5cc81541550df2deafaf9db5.png)

> [@MichelleBarnett](#):
>
> 会社のロゴをアップロードして、アイコンとして使用することはできますか？

もちろん可能です。このトピックには、カスタムアイコンの追加に関するセクションがあります。

> [@Introducing Font Awesome 5 and SVG icons](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643):
>
> See also: [We're upgrading our icons to Font Awesome 6!](https://meta.discourse.org/t/were-upgrading-our-icons-to-font-awesome-6/325349) We will shortly merge into master a [branch](https://github.com/discourse/discourse/tree/fontawesome5) that upgrades Discourse to Font Awesome 5.5.0 (the free version) and switches to using SVG icons instead of an icon font. This is a substantial change, with lots of benefits, and one significant change for developers. Here is a quick rundown of the changes: using SVG icons will provide crisper icons, better for accessibility and easier to customize, see [this Github article](https://blog.github.com/2016-02-22-delivering-octicons-with-svg/) for more details since…

設定が完了すれば、このテーマコンポーネントで追加した任意のカスタムアイコンを使用できるようになります。ぜひご確認いただき、問題が発生した場合はお知らせください。

> [@awesomerobot](#):
>
> @Johani さん、この名前にアイコンを追加したほうがいいかもしれませんね。

その変更と、いくつかの実装改善をこちらで行いました。

> <https://github.com/discourse/discourse-icon-header-links/commit/f6fbef18af2e1a06fcd68c9199df6c337fca2ce9>

> [@dylanh724](#):
>
> アイコンの色を変更したい場合

新しいアップデートでは、使用するタイトルに基づいて、各リンクに固有のプレフィックス付きクラスが追加されます。たとえば、

`facebook, fab-facebook, https://facebook.com, vdm, blank`

と指定すると、リンクには以下のクラスが適用されます。

`header-icon-facebook`

テンプレートは `header-icon-ICON-TITLE` です。

これにより、CSS で以下のようにターゲットを指定できます。

```scss
.d-header-icons {
  .header-icon-facebook svg {
    fill: #4267b2;
  }

  .header-icon-twitter svg {
    fill: #1da1f2;
  }

  // ここに他のアイコンを追加
}

```

その結果、以下のような見た目になります。

![colored icons](https://global.discourse-cdn.com/meta/original/3X/b/b/bbffe7def6d0f7448c0e9fc950d2d0d1140f780c.png)

---

_[View the full topic](https://meta.discourse.org/t/custom-header-links-icons/86307)._