外部リンクに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 vYNxOeO by Koji Murakami (@koojy) on CodePen.

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

WEB開発の依頼について

フリーのフロントエンドエンジニアとして企業様のWEB開発をさせていただいています。

Vue.jsやReact.jsを使ったアプリケーションの作成などのご要望がありましたら、お気軽にお問い合わせください。

実績や単価については「WEB開発について」をご覧ください。

運営について

MK Devはフリーランスのエンジニア村上浩司が運営するメディアです。フロントエンドを中心としたWEB開発、PCやガジェットに関連したことを発信しています。

最新の情報を受取る

(c) MK Dev. All Rights Reserved.