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

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*=""]部分一致

CSS Web制作

アイコンDL

CSS追加

関連