SPONSOR
日常

メニューアイコンの種類と名前/HTMLとFont Awesome

SPONSOR
SPONSOR
sponsor

メニューアイコンの種類と名前

スマートフォンやパソコン、インターネットを利用していると自然にメニューアイコンの位置や形を覚えると思いますが、その名前と HTML や Font Awesome での表示方法を記載しておきます。

大抵は右上にメニューアイコンを設置していることが多く、誰もがわかりやすく、アクセスしやすい位置に表示されています。右利きの人が多いので、右上の方が便利です。

ハンバーガーメニュー

  • 横三本線で、ハンバーガーのような形【
名前メニューアイコン Font Awesome
ハンバーガーメニューbars
メニューアイコン

三点リーダー(ミートボールメニュー)

  • 3つのドット【
名前メニューアイコンHTMLFont Awesome
三点リーダー … ellipsis-h
メニューアイコン

三点リーダー(ミートボールメニュー)をHTMLで表示

…

縦三点リーダー(ケバブメニュー)

  • 縦3つのドット【
名前メニューアイコンHTMLFont Awesome
縦三点リーダー⋮ellipsis-v

スマートフォンやブラウザでも良く目にするアイコンです。

メニューアイコン

縦三点リーダー(ケバブメニュー)をHTMLで表示

⋮

ドネルメニュー

  • 横三本の上から線が短くなる
名前Font Awesome
ドネルメニューbars-filter
メニューアイコン

弁当メニュー

  • ドットが縦横に並んでいてお弁当のような形
名前Font Awesome
弁当メニューth
メニューアイコン
sponsor

Font Awesome でアイコンを表示する

Font Awesome 4

Font Awesome 5

Font Awesome については下のリンクを参照

Font Awesome でアイコンやロゴを表示させる手順/Font Awesome4と5の違い - WordPress を簡単に
目次 Font Awesome とはFont Awesome4Font Awesome5Font Awesome6Font Awesome のアイコンを利用できるようにするFont Awesome のアイコンを表示するF
SPONSOR
ゆきを

経験だけで記載しているブログです。 むずかしい言葉や流行りの言葉は使わず、できる限り簡単な言葉で書くようにしています。 ・福岡モーニング&ランチ ・配信とインテリアの実話映画 ・PCとスマホとゲーム ・インテリアと日常 ・WordPressを簡単に

Recent Posts

台湾かき氷のレシピ

台湾かき氷の作り方 かき氷機が…

7か月 ago

衣類を長持ちさせたい洗濯方法は?

洗濯物を全部一緒に洗う 多くの…

12か月 ago

マイルで航空券Get/JALでんき

JALのマイル どのくらいで航…

1年 ago

【料理レシピ】超簡単 煮卵の作り方

煮卵の作り方 このレシピ通りに…

1年 ago
SPONSOR