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
※英語での使用許可申請がいる。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*=""]
部分一致