チェックマークを表示させるCSSの表現方法を教えてください

前提・実現したいこと

以下のようにHTMLにクラスを記述しただけで、
「チェックマークのアイコン」が表示されるようにCSSを書きたいのですが、
どのようにしたらいいかわかりません。
【html】

<div class="check">参考記事</div> 【想定する表示】 ![イメージ説明](3766e6f3a79d292d934ba60f7dd094b1.png) ※フォントサイズ等のチェックマーク以外の要素は考慮しないでOKです。 ※表示されるチェックマークはFont Awesomeを利用したものが表示されるのがベストですが、　表現できればやり方は何でもOKです。

よろしくおねがいします。

行動規範の内容に同意します

回答4件

こんな感じでいかがでしょう

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
6    <style>
7      .check::before{
8        font-family:'Font Awesome 5 Free';
9        content: "\f00c";
10        padding-right:5px; /* 適当に調整 */
11        color: #6C9FCE;
12        font-weight: 600; 
13      }
14    </style>
15  </head>
16  <body>
17    <div class="check">参考記事</div>
18  </body>
19</html>

投稿2018/10/10 01:42

dit.

総合スコア3235

Null795

2018/10/11 02:30

丁寧なご説明ありがとうございました！　細かくデザイン調整する時に参考にさせていただきます！

行動規範の内容に同意します

ベストアンサー

こちらでいかがでしょうか。

.check::before {
　content: '\f00c';
  font-family:FontAwesome;
}

htmlファイルの方でFontAwesomeの読み込みはしてくださいね。

投稿2018/10/10 01:32

編集2018/10/10 01:33

y_5

総合スコア29

Null795

2018/10/11 02:30

シンプルなご回答ありがとうございました！　解決しました！

行動規範の内容に同意します

Font Awesome なら、こちらも参考にどうぞ

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

投稿2018/10/10 01:31

miyakichi

総合スコア297

こちらの記事はいかがでしょうか。
BootstrapのアイコンGlyphiconsとFontAwesomeの使い方

投稿2018/10/10 01:19

編集2018/10/10 01:20

madoka9393

総合スコア994

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

チェックマークを表示させるCSSの表現方法を教えてください

前提・実現したいこと

関連した質問