MK Dev

外部リンクに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を使えばお手軽に実装できますね!

AUTHORこの記事を書いた人

Koji Murakami

フリーでWeb開発をしているフロントエンドエンジニア。

SNS

SHARE記事をシェア

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

WEB制作の記事

WEB制作を依頼する

フリーのエンジニアとしてWEB制作のご依頼を引き受けています。
実績、できること、単価など詳しい内容をご覧いただきお問い合わせよりご連絡ください。