Qiitaアイコンをきれいにできた

もともとはアイコン背景が透過されておらず、大きさも他のFA（Font Awesome）アイコンと比べると心なしか大きい。

それを以下のように背景透過、大きさ調整、位置も「Qiita」の文字列横に違和感なく配置（サイトバー、フッター両方とも）。

解説

Qiita記事としてあげようかとも思ったが、実際できてみると記事にするほどの価値もない気がするため、ここで簡単にまとめておく。

1. デザインガイドライン - Qiita:SupportでQiitaアイコンPNGファイルをダウンロードしてassets/images/qiita.pngとして保存

   ここでペイントソフト等を使って編集してしまうと、背景透過が白背景に変更されることがあるので注意する。前回はこれに気づかず、「なぜ透過背景なのに白背景が表示されている？」と悩んだ。

2. _config.ymlのauthorとfooterのlinksに追加（今気づいたが、どうやらfa-fwの有無は関係ないらしい）

   author:
     links:
       - label: "Qiita"
         icon: "fab fa-fw icon-qiita"
         url: "マイページまでのURL"
   
   footer:
   links:
     - label: "Qiita"
       icon: "fab icon-qiita"
       url: "マイページまでのURL"
   

3. _sass/_utilities.scssに以下を追加

   // https://saruwakakun.com/html-css/reference/change-before-after
   // https://muralnotes.com/css-secondary-image-responsive/
   .social-icons {
       .icon-qiita::before {
         padding-right: 5px;
         padding-bottom: 4px; // manual adjustment
         content: "";
         display: inline-block;
         font-size: $type-size-6;
         height: 1.344em; // manual adjustment
         width: 1.007em; // manual adjustment
         background-image: url(../images/qiita.png);
         background-size: contain;
         background-repeat: no-repeat;
         vertical-align: middle;
         color: #55C500;
       }
   }
   

   • 「manual adjustment」部分は手動で微調整した結果なので個々に調整
   • background-image: url(../images/qiita.png)としてURLがビルド後のパスになっているが、これでローカルGitHub Pagesどちらでも問題なし
   • color: #55C500はQiitaアイコンの利用規約より
   • font-size: $type-size-6は_sass\minimal-mistakes\_variables.scssで定義されているサイズ
   • その他の中身は上記2本のリンクを参照

以上。