How to2019.06.29

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

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

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

目次

リンクにFontawesomeのアイコンをつける
1. Fontawsomeのブランドアイコンをfont-familyに指定する場合は注意
特定のURLのリンクに特定のアイコンをつける
共通の部分をscssでmixinにする
まとめ

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

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

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

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

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

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

1
font-family: Font Awesome\ 5 Free;

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

1
font-family: Font Awesome\ 5 Brands;

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

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

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

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

[github | Font Awesome](https://fontawesome.com/icons/github?style=brands)

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

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

1
2
3
4
5
6
7
8
9
@mixin fa-brand($content) {
  &:before {
    display: inline-block;
    margin-right: 5px;
    font-family: Font Awesome\ 5 Brands;
    font-weight: 900;
    content: $content;
  }
}

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

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

1
2
3
4
5
6
7
a[href^="https://github.com"] {
	@fa-brand('\f09b');
}

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

まとめ

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

@[codepen](https://codepen.io/koojy/pen/GbOqeL/)

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