外部リンクにFontawesomeでブランドアイコンをつける方法と注意点

外部リンクにアイコンがついているとどんなリンクか分かるしおしゃれ!

ということでFontawesomeを使ってWebサービスのリンクにアイコンを付ける方法を紹介します。

リンクにFontawesomeのアイコンをつける

aタグにアイコンを表示するには疑似要素のbeforeかafterを使います。

Beforeならリンクの前、afterならリンクの後につけることができます。

a:before {
	display: inline-block;
	margin-right: 5px;
	font-family: Font Awesome\ 5 Brands;
	font-weight: 900;
	content: アイコンの文字コード
}

Fontawsomeのブランドアイコンをfont-familyに指定する場合は注意

Fontawesomeの無料版をfont-familyで指定刷る場合は通常下記のように指定します。

font-family: Font Awesome\ 5 Free;

ですがブランドアイコンの場合は指定方法が異なりFreeの部分がBrandsになります。

font-family: Font Awesome\ 5 Brands;

特定のURLのリンクに特定のアイコンをつける

特定のURLに決まったアイコンをつけるにはCSSでURLを合わせて指定するようにします。

たとえばGithubなら下記のような感じです。

a[href^="https://github.com"] {
	display: inline-block;
	margin-right: 5px;
	font-family: Font Awesome\ 5 Brands;
	font-weight: 900;
	content: '\f09b'; // Githubの文字コード
}

共通の部分をscssでmixinにする

Scssを使っていれば共通で指定する部分は共通化することができます。

@mixin fa-brand($content) {
  &:before {
    display: inline-block;
    margin-right: 5px;
    font-family: Font Awesome\ 5 Brands;
    font-weight: 900;
    content: $content;
  }
}

こんな感じのmixinを定義しておけばこんな感じで指定がスマートになります。

アイコンの種類を複数指定する場合でもスマートですね。

a[href^="https://github.com"] {
	@fa-brand('\f09b');
}

a[href^="https://twittercom"] {
	@fa-brand('\f099');
}

まとめ

これまで紹介した方法をCodepenで作ってみました。

See the Pen GbOqeL by Koji (@koojy) on CodePen.

外部リンクにアイコンがつくとグンと視認性があがりますし、Fontawesomeを使えばお手軽に実装できますね!

この記事をシェアする
コウジ
Vue.jsが好きなフリーランスのフロントエンドエンジニアです。 フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。
Nuxt.jsを身につけたい!
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

開発依頼

VueやReactを用いたSPAアプリケーションの開発を中心にフロントエンド開発のプロジェクトをお手伝いさせていただいております。
開発事例の詳細などはAboutの開発事例をご覧ください。

Contactよりお気軽に必要事項をご入力の上ご連絡ください。