Webページに 「への字型」の上向き矢印、「逆への字型」の下向き矢印、「くの字型」の矢印文字を表示したい

Webページに 「への字型」の上向き矢印、「逆への字型」の下向き矢印、「くの字型」の矢印文字を表示する方法を紹介します。

文字・記号で表現する

左方向 (U+2039)

U+2039

‹

右方向 (U+203A)

U+203A

›

左方向 (U+003C)

U+003C

<

右方向 (U+003E)

U+003E

>

上方向 (U+2227)

U+2227

∧

下方向 (U+2228)

U+2228

∨

文字・記号で表現する (Wingdings3)

Wingdings3 フォントを利用する場合、下記の文字が利用できます。

左

U+F085

右

U+F086

上

U+F087

下

U+F088

Microsoft bowtieフォントを利用する

Microsoftのbowtieフォントを利用して矢印を表現できます。

アイコンフォントのCSSの記述方法についてはこちらの記事を参照してください。

bowtieフォント

https://github.com/jimlamb/bowtie

下

U+E610

左

U+E611

右

U+E612

上

U+E613

自分でアイコンフォント(シンボルフォント)を作成する

自分でアイコンフォントを作成する方法もあります。アイコンフォントの作成手順は下記の記事を参照してください。

• FontCreator を利用する方法
• IcoMoon を利用する方法
• FontForge を利用する方法

著者

トリーニョ

iPentecのメインデザイナー
イタリア好き。Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。