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 GbOqeLby koojy (@koojy) on CodePen.

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

  • Font Awesome

シェア

この記事を書いた人

Koji Murakami

React.jsとVue.jsが好きなフリーランスのフロントエンドエンジニアです。
フロントのHTML・CSS・JavaScript(TypeScript)の設計実装をメインにしながら、RubyやNodeでサーバーサイドのAPI作ったりフルスタックな動きもしています。

関連記事

Web開発のお仕事をお受けてしています。

フリーランスのエンジニアとして、フロントエンドを中心としたWeb開発のお手伝いをさせていただいております。
できることや単価など詳しい情報は下記をご覧ください。