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

雑学・レビュー
スポンサーリンク

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

スポンサーリンク

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

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

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

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

shift ⇧ + option ⌥ + K

コピペの場合

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

「」 ←コレ

HTML上で表示させる方法

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



アップルマークは機種依存文字なので、上記の入力方法はいずれもWindows等のMac以外の環境では文字化けする可能性大です。

今回のアップルマークに限らず、機種依存文字は、使用環境によっては文字化けを起こすので、もし安全性を求めるならこれらの入力方法はあまりおすすめではありません。

【文字化けの例】

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

コメント

タイトルとURLをコピーしました