BLOG

2020.11.25

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

こんにちは。

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

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

見本はこちら！

See the Pen poEzPMP by ゆーじろー (@yujiron) on CodePen.dark

しっかり擬似要素で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>

<!DOCTYPE html>

<head>

integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">

<title>擬似要素でfontawesomeを表示する方法</title>

</head>

<body>

<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;
}

/* 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;
}

.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;
}

.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 {

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アイコンを表示する方法についてでした！

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

BLOG LIST

CONTACT
RECRUIT

CONTACT

お仕事の依頼・ご相談は
こちらからお問い合わせください。

RECRUIT

私たちと働いていただける方を募集しています。

BLOG

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

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

① fontawesomeのCDNを読み込む

② HTMLのコーディング

③ CSSのコーディング

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

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

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

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

まとめ

CONTACTRECRUIT

CONTACT
RECRUIT