リンクにサイトアイコンを表示

CSSの疑似要素でリンクにサイトアイコンを付ける。
URLで判別する為、よく使うリンク先をいくつかCSSに記載しておく。

アイコンDL

• GitHub
  GitHub Logos and Usage > Download Invertocat logo
• BOOTH
  プレスキット – ピクシブ株式会社 > ピクシブプロダクトロゴ > ダウンロード > BOOTH
• note
  ロゴデータ – noteヘルプセンター > ロゴデータ・ガイドラインのダウンロード
• Qiita
  デザインガイドライン | Qiita ヘルプ > ダウンロード > Qiita > PNG
• はてなブログ
  はてなブログ – Hatena Brand Resources > ロゴデータをダウンロード
  ※余白が大きいのでCSS側でサイズ調整
• Twitter
  Twitterについて | Twitterロゴ、ブランドガイドライン、ツイートツール > Twitterロゴ > ダウンロード

• Amazon
  Amazon Newsroom – プレスキット
  ※横長でアイコンに不向き。Wikimedia Commonsあたりからもらう
• YouTube
  Brand resources – How YouTube Works
  ※英語での申請がいる。Wikimedia Commonsから

CSS追加

a[href^="https://github.com"]::after
	display: inline-block
	content: ""
	background: url(画像URL) no-repeat
	background-size: contain
	width: 17px
	height: 17px
	margin-left: 3px
	vertical-align: sub

• a[href^=""]前方一致
• a[href*=""]部分一致