【初心者向け】文字の先頭に絵文字をつけたい【うまくいかないのもある】

ここでは、記事を書くときに絵文字やアイコンを使う方法を知りたいという人向けに、コピペで使える絵文字や、フォントタグを使ったアイコンをご紹介いたします。

記事に絵文字やアイコンを使うことで、文字だけの記事より見栄えがよく親しみやすい印象になります。
記本文以外にも、メニューやカテゴリーに表示することもできるので、ブログやサイトを見やすくかわいく飾ってみましょう！

はじめに
文章の前にチェックマークをつけたい
Font Awesomeアイコンのチェックマークをつける
1. バージョン5ではうまく表示されない
2. Font Awesomeアイコン備考
まとめ

はじめに

ブログを見やすくするために、箇条書きの文章の前に「チェックマーク」をつけたいのです。

✔←絵文字のコピペが一番カンタンにマークをつけられます
✔ HTMLタグでもマークをつけられます
✔ CSSを使えるともっと便利です

でも失敗もあるよ、、

文章の前にチェックマークをつけたい

どんなに難しいタグなんだろうと思っていましたが、一番簡単な方法はコピペでした。LINEやツイッターでよく見るあの絵文字をコピペするだけです。

✔😱🌸💧　←普通にコピペ

✔😱🌸💧　で大きさを変える
　　　　　　↓
✔😱🌸💧

10進数HTML　💧→💧
16進数HTML　💧→💧　でも表示されます。

絵文字はこういったサイトからコピペで簡単に貼れます

Emoji Homepage 👀 - Copy and paste emoji. 💨 Fast and 👌 Simple.

Emoji Homepage is the easiest way to find and get emojis. Just type, copy and paste.

Font Awesomeアイコンのチェックマークをつける

Font Awesomeアイコンのバージョンは、今は「Font Awesome 4」が使われていますが、ゆくゆくは「Font Awesome 5」になるとのことで、Cocoon設定>全体>サイトアイコンフォントを「Font Awesome 5」にしておきました。

↓テキストにFont Awesomeアイコンを使うときはHTMLタグで指定します。

アイコンを文章の前につける

　アイコンと文字の間をあける

　サイズを大きくする
　
　と､「fa-5x」まである。
色をつける

CSSで指定するときは、
<CSS>
.mojicolor-lightsalmon {color: lightsalmon}

<HTML>

「lightsalmon」の部分は「#ffa07a」などのカラーコードを使ってもOKです。

Font Awesomeバージョン4

Font Awesome Icons

Font Awesome, the iconic font and CSS framework

Font Awesomeバージョン5

Find Icons with the Perfect Look & Feel | Font Awesome

Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid ico...

バージョン5ではうまく表示されない

実は外観>テーマファイルエディターのCSSでFont Awecomeを指定してみたのですが、うまくいきませんでした。

「content: ‘\f00c’;」のバックスラッシュ（「/」の反対の記号）の部分がどうしても「\」になるのです。

そのせいかどうかわかりませんが、どうやっても記事に反映されませんでした。

使ってみたコード
<CSS>
.check::before{
font-family: Font Awesome 5 Free;
content: ‘\f00c’;
color: gray;
speak: none;
}

.twitter::before {
font-family: “Font Awesome 5 Brands”;
content: ‘\f099′;
speak: none;
}

<HTML>
これはチェックです

これはチェックです

これはツイッターです

これはツイッターです

↑
わたしの環境では、テキストだけでマークが表示されないのです。

「Font Awesome 4」だと表示されますが、
　まるチェック
　黒まるチェック
　Steamアイコン
　Twitterアイコン

「Font Awesome 5」だとうまくいきません。




↑わたしの環境では何も表示されません。

ひょっとしてパソコンの環境やブラウザによるのかもしれません、、うまく表示されるようになったら追記いたします。

Font Awesomeアイコン備考

Font Awesome 5を使う場合は「font-family: Font Awesome 5 Free;」
Font Awesome 4を使う場合は「font-family: FontAwesome;」

ブランド系のアイコン（class名にfabがついている）を使うときは「font-family: “Font Awesome 5 Brands“」

Solidタイプのアイコンを表示するときには「font-weight: 900;」
Regularタイプのアイコンを表示するときには「font-weight: 400;」が必要。