【HTML/CSS】ホームぺージにおける特殊記号やアイコンの表示について

ホームページのHTMLのタグ内に、直接特殊記号を書いた場合、ページが表示された場合に文字化けが起こることがあります。
これは、ローカルのパソコン上で用いている特殊記号が環境依存の特殊記号になっているためです。

よくあるのが、ワード上に書かれた文章をコピーして、HTMLのタグ内に貼り付けたような場合です。
ワード上では、環境依存の記号類が多いので、特に注意が必要です。

１．HTML上での特殊記号の表示方法

特殊記号のコードについては、コード表を提供しているサイトがあります。

●HTMLの記号・特殊文字の文字コード表（文字実体参照、数値文字参照）

このサイトでは、以下のような表で特殊文字を説明しています。（一例です）

記号をHTMLのタグ内に書く場合は、「文字実体参照」のコードを書きます。

一方、CSSの「content」を使って記号を表示するような場合は、16進数を用いますが、そのコードは少し異なります。

.paper .item dt:before{
content:"\00B6";
margin-right:0.5em;
}

上記のように、16進数であれば「¶」と書くところですが、「\00B6」という形で表記します。
（\は、バックスラッシュと同じものです）

２．Font Awesomeを使ったアイコンの表示方法

font awesomeは、ウェブ上で様々なアイコンを提供しているサイトです。
https://fontawesome.com/

このサイトの「icons」の検索ページにあるアイコンを使用する方法を説明します。

検索欄に英語で検索を行うことで、様々なアイコンが出てきます。
検索後に「Free」を押すことで、無料のアイコンを使うことができます。
気に入ったアイコンをクリックすると、コードが表示されます。
このコードをホームページやワードプレスに貼り付けることでアイコンを表示できる仕組みです。

ただし、ホームページやワードプレスでこれらのアイコンを表示するためには、前準備が必要になります。

本来は、font awesomeが提供している「kit code」を使うのがいいようですが、より簡単に「CDN」を使って設定する方法をご紹介します。

CDNは、「cdnjs」というサイトで提供されています。
https://cdnjs.com/libraries/font-awesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

上記のタグをHTMLのヘッダーに貼り付けます。

ワードプレスの場合は、ヘッダー内にコードを貼り付けるためのプラグインが必要になります。

「Insert Headers and Footers」というプラグインを使うと簡単です。

あとは、HTMLタグ内で以下のようなタグをを使用することで、アイコンを表示できます。

<i class="fa-solid fa-arrow-up-from-bracket"></i>

これらのタグは、font awesomeのアイコンをクリックすることで、表示されるタグをコピーすればいいだけです。
（ちなみに、無料のアイコンは検索後にFreeを選択してください）

それでは、ここで具体的に表示してみます。

以下のようなコードをHTMLで書いてみます。

<i class="fa-solid fa-arrow-right"></i>　
<i class="fa-solid fa-arrow-up"></i>　
<i class="fa-solid fa-arrow-up-from-bracket"></i>　
<i class="fa-solid fa-arrow-down"></i>　
<i class="fa-solid fa-arrow-up-right-from-square"></i>　
<i class="fa-solid fa-arrow-left"></i>

すると、上記のようなアイコンが表示されます。