アップルマーク（りんごのアイコン）表示方法と使用注意点

Mac、iPhone、iPadでお馴染みApple社のリンゴマークを表示する方法です。

文字として直接表示する方法（要注意）

以下の方法でアップルマークを直接表示させることができます。

ショートカットキーでの入力

以下のショートカットキーでアップルマークを直接入力することができます。

shift ⇧ + option ⌥ + K

コピペの場合

以下のアップルマークをコピー＆ペーストすることで使用することができます。

「」 ←コレ

HTML上で表示させる方法

HTML上では、以下のコードがアップルマークとなります。



Font Awesome使用時の表示方法

HTML上での使用に限られますが、Font Awesomeを使用することにより、どの環境下でもアップルマークを安定表示させることができます。

Font Awesomeとは、アイコンを文字として使用できるHTML上のアイコン文字ツールで、無料で数千個のアイコン文字を使用することができます。

Font Awesomeには多種多様なアイコン文字が用意されていますが、この中にAppleマークがあるのでコレを利用します。

Font Awesomeを使用するには、予め専用のCSSを読み込んでおく必要があります。
例外としてWordpress使用のテーマによっては予めFont Awesomeが使用できる設定になっている場合もあります。

【HTML内で直接記載の場合】

<i class="fab fa-apple"></i>

【CSSで設定する場合】

【HTML】
<p>これは<span class="apple">アップルマーク</span>です。</p>


【CSS】
.apple:before {
  font-family: "Font Awesome 5 Free";
  content: '\f179';
  font-weight: 900;
}