【簡単】擬似要素でfontawesomeを表示する方法【CSS】

こんにちは。

大学生WEBコーダーのYUJIROです。

今回は、「擬似要素でfontawesomeを表示する方法」について解説していきます!

見本はこちら!

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”poEzPMP” default_tab=”css,result” user=”yujiron”]See the Pen poEzPMP by ゆーじろー (@yujiron) on CodePen.[/codepen_embed]

しっかり擬似要素でfontawesomeが表示されていますね。

僕自身も擬似要素でfontawesomeを表示することができず、つまづいた時もありました。

しかし今回紹介する方法を使えば、簡単に擬似要素でfontawesomeアイコンを表示できるようになります。

fontawesomeアイコンを使いこなせるようになると、あなたの実装の幅も広がります。

5分ほどで終わるので、是非参考にしてください!

【簡単】擬似要素でfontawesomeを表示する方法【CSS】

見本のように、擬似要素でfontawesomeを表示するには

① fontawesomeのCDNを読み込む

② HTMLのコーディング

③ CSSのコーディング

この3つのステップを踏むことで、擬似要素でfontawesomeアイコンを表示することができるようになります!

① fontawesomeのCDNを読み込む

まずはfontawesomeのCDNを自分が表示したいHTMLファイルのheadタグの中に入れる作業をします。

これをしないと、コードがあっていても、fontawesomeアイコンが表示されません。

fontawesomeのCDNの読み込み方については、こちらの記事がわかりやすいです!

もし分からない方がいたら、是非参考にしてください。

② HTMLのコーディング

fontawesomeのCDNをHTMLファイルのheadタグの中に入れることができたら、次はHTMLのコーディングをしましょう!

今回は、「fontawesome」の文字の左側に、fontawesomeで読み込んだアイコンを表示してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
        integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
    <title>擬似要素でfontawesomeを表示する方法</title>
</head>
<body>
    <div class="btn">
        <a href="">fontawesome</a>
    </div>
</body>
</html>

「.btn」というclassの中に、aタグを入れたシンプルなボタンの実装ですね。

③ CSSのコーディング

最後にCSSの擬似要素でfontawesomeアイコンを表示します!

ここからが本題ですね。

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
    text-decoration: none;
}

/* ◎ここから */

.btn {
    text-align: center;
    margin: 100px 0;
}
.btn a {
    display: inline-block;
    padding: 15px 40px;
    border: 1px solid black;
    color: black;
}
.btn a::before {
    content: "\f164";
    font-weight: 400;
    font-family: "Font Awesome 5 Free";
    padding-right: 10px;
}

1行目〜51行目は、リセットCSSのコードを書きました。

リセットCSSを指定することで、ブラウザがデフォルトで持っている余白などを消してくれるので、コーディングがやりやすくなります。

そして55行目〜70行目が、今回のテーマである「擬似要素でfontawesomeを表示する」コーディングです。

55行目〜58行目は、「.btn」classをブラウザの真ん中に持ってきて、上下に余白を持たせることで、見やすいように表示。

.btn {
    text-align: center;
    margin: 100px 0;
}

59行目〜64行目は、「.btn」classの中にあるaタグに幅を持たせるコーディングをしています。

まず「display: inline-block;」を指定して、aタグをインラインブロック要素にする。

インラインブロック要素は余白を持つことができるので、「padding: 15px 40px;」でボタンの余白を持たせる。

そして「border: 1px solid black;」でボタンの枠を作ります。

最後に「color: black;」で文字の色を黒にします。

.btn a {
    display: inline-block;
    padding: 15px 40px;
    border: 1px solid black;
    color: black;
}

65行目〜70行目は、擬似要素を使って、fontawesomeアイコンを表示するコーディングです。

.btn a::before {
    content: "\f164";
    font-weight: 400;
    font-family: "Font Awesome 5 Free";
    padding-right: 10px;
}

まずは「.btn a::before」とすることで、「.btnの中にあるaタグの前」にfontawesomeを表示させます。

次に「content: “\~~~”;」のように、使いたいfontawesomeアイコンのユニコードを「〜〜」の部分に書く。

今回は見本で使った「thumbs-up」のアイコンで紹介します。

以下の画像の赤矢印が指している「f164」のコードを、先ほどの「content: “\~~~”;」の中に入れます。

そして、「font-weight: 400;」を書くことで、しっかりfontawesomeアイコンが表示されます。

「font-weight」のコードがないと、fontawesomeアイコンが表示されないので、こちらもコーディングしてください。

fontawesomeは、フォントとしてみなされるので、「font-family: “Font Awesome 5 Free”;」でfont-familyも指定しましょう!

ここまででのコーディングで、擬似要素でfontawesomeアイコンが表示されたと思います。

このままだと、aタグのすぐ横にfontawesomeアイコンが表示され、詰まって見える。

なので、「padding-right: 10px;」を入れて、右側に余白をつけてあげましょう!

これで擬似要素でfontawesomeアイコンを表示することができました!

擬似要素でfontawesomeが表示されない時は?

最後に、擬似要素でfontawesomeが表示されない時がたまにおきます。

そんな時は、以下の3つのことが抜けていないかチェックしてみましょう!

大体表示されない時は、以下の3つのうちどれかが抜けていることが多いので、、、。

① headタグの中に、fontawesomeのCDNを書いていない

まずは、あなたがfontawesomeを表示したと思っているHTMLファイルの中のheadタグに、しっかりfontawesomeのCDNが書かれているのか?を確認してみましょう!

いくらコードが合っていたとしても、CDNが抜けていると一生fontawesomeアイコンを表示することはできません。

② font-weightを指定していない

「font-weight」のコードがないと、fontawesomeアイコンが表示されません。

こちらのコードが抜けている場合が個人的に多かったので注意です!

③ fontawesomeアイコンのコードが適切でない

CSSにコーディングする際に、fontawesomeアイコンのコードが適切でないと、上手く表示されません。

以下の画像のように、<i>タグのコードではなく、赤矢印のユニコードをコーディングするようにしましょう!

こちらも間違っているかもしれないので、fontawesomeアイコンが表示されない場合は、是非確認してください!

まとめ

以上が、擬似クラスでfontawesomeアイコンを表示する方法についてでした!

ポイントさえ押さえたら、簡単なので、是非これからのコーディングに活かしてください!

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。