はてなブログのWebアイコンフォントは、公式に掲載がないので使いたいとき用に、一覧表を作ることにしました。
Webアイコンフォントについて
Webアイコンフォントは
「管理画面」→「 デザイン」→「 カスタマイズ」 →「 デザインCSS」
こんな風に説明する時や、グローバルメニューに使えて便利。
- Webアイコンフォントは「Font Awesome」が有名。「Font Awesome」は外部からの読み込みになるのでページが若干重くなる
- はてなブログにはデフォルトで読み込まれている独自の「Webアイコンフォント」がある
なるべくならページの読み込みは軽くしたいですよね!
「Font Awesome」は沢山あって心惹かれるけど、はてなブログのアイコンフォトだけで十分だと思います。
Webアイコンフォントの使い方
- HTMLのタグや特有のクラス名を付与することで、Webサイト上にアイコンを表示できる
- CSSでサイズや色を変更できる
HTMLで使用する方法
アイコンに対応したクラス名をi
タグもしくはspan
タグで囲む。
- <i class="クラス名"></i>
▽「クラス名」の入力
- <i class="blogicon-home"></i>ホーム
ホーム
大きく表示したい場合はlg
をクラス名の後に半角スペース
をあけて記入する。
- <i class="blogicon-home lg"></i>ホーム
ホーム
記事本文以外にも、HTMLで書き込みできるところなら、ヘッダー・フッター・サイドバーなどでも表示させることができます。
「見たまま編集」の場合はHTML編集画面にspan
タグを使う。
- <span class="blogicon-home"> </span>ホーム
ホーム
※span
要素の中に何もないと「見たまま編集」に戻した時に消えてしまうので空白( )を入れる。
CSSで表示する方法
使いたい要素のcss擬似要素にfont-family: blogicon;
とcontent: "アイコンのコード";
をつける
例)
- .categories a::before {
- font-family: blogicon;
- content: "\f04a";
- }
はてなブログのWebアイコンフォント一覧
コード | アイコン | (日本語名) | クラス名 |
---|---|---|---|
f000 | はてなブログ | blogicon-hatenablog | |
f001 | プラス | blogicon-plus | |
f002 | マイナス | blogicon-minus | |
f003 | 並び替え | blogicon-reorder | |
f004 | グリッド | blogicon-grid | |
f005 | 山形 左 | blogicon-chevron-left | |
f006 | 山形 右 | blogicon-chevron-right | |
f007 | 山形 上 | blogicon-chevron-up | |
f008 | 山形 下 | blogicon-chevron-down | |
f009 | 外部 | blogicon-external | |
f00a | プラグイン | blogicon-plugin | |
f00b | メンバー | blogicon-member | |
f00c | アカウント | blogicon-account | |
f00d | デザイン | blogicon-design | |
f00e | 歯車 | blogicon-cog | |
f00f | ページ | blogicon-pages | |
f010 | 編集 | blogicon-edit | |
f011 | スター | blogicon-addstar | |
f012 | 購読 | blogicon-subscribe | |
f013 | 記事 | blogicon-entry | |
f014 | 通知 | blogicon-notify | |
f015 | 鍵 | blogicon-private | |
f016 | ユーザー | blogicon-user | |
f017 | ホーム | blogicon-home | |
f018 | スパナ | blogicon-setting | |
f019 | ドラフト | blogicon-draft | |
f01a | 検索 | blogicon-search | |
f01b | アナリティクス | blogicon-analytics | |
f01c | ヘルプ | blogicon-help | |
f01d | コメント | blogicon-comment | |
f01e | インポート | blogicon-import | |
f01f | お題 | blogicon-odai | |
f020 | トラック | blogicon-truck | |
f021 | グループ | blogicon-group | |
f022 | フォルダ | blogicon-folder | |
f023 | 追加 | blogicon-add | |
f024 | ペン | blogicon-pen | |
f025 | 閉じる | blogicon-close | |
f026 | ゴミ箱 | blogicon-trash | |
f027 | ブックマーク | blogicon-bookmark | |
f028 | リダイレクト | blogicon-redirect | |
f029 | チェック | blogicon-check | |
f02a | クロップ | blogicon-crop | |
f02b | リピート | blogicon-repeat | |
f02c | ログアウト | blogicon-logout | |
f02d | スター | blogicon-star | |
f720 | スター | blogicon-star-o | |
f02e | プロ | blogicon-pro | |
f030 | マイブログ | blogicon-myblog | |
f031 | 最新 | blogicon-recent | |
f032 | インフォメーション/告知 | blogicon-info | |
f033 | いいね | blogicon-good | |
f034 | Amazon | blogicon-amazon | |
f035 | blogicon-twitter | ||
f036 | blogicon-facebook | ||
f037 | シェア | blogicon-share | |
f038 | コード | blogicon-code | |
f039 | リスト | blogicon-list | |
f03a | カレンダー | blogicon-calendar | |
f03b | 中括弧 | blogicon-bracket | |
f03c | 写真 | blogicon-photo | |
f03d | 色 | blogicon-color | |
f03e | パブリック/公共の | blogicon-public | |
f040 | リアルタイムプレビュー | blogicon-realtime-preview | |
f041 | 警告 | blogicon-warning | |
f042 | リンク | blogicon-link | |
f043 | 時間 | blogicon-time | |
f044 | マークダウン | blogicon-markdown | |
f045 | Evernote | blogicon-evernote | |
f046 | iTunes | blogicon-music | |
f047 | ニコニコ動画 | blogicon-niconico | |
f048 | ハート | blogicon-heart | |
f049 | ハート | blogicon-heart-alt | |
f04a | タグ | blogicon-tag | |
f04b | メール | blogicon-mail | |
f04c | ヘルプ | blogicon-help-alt | |
f04d | すし | blogicon-sushi | |
f04e | RSS | blogicon-rss | |
f051 | スマホ | blogicon-smartphone | |
f052 | パソコン | blogicon-laptop | |
f053 | ミクシィ | blogicon-mixi | |
f054 | 俳句 | blogicon-haiku | |
f055 | AMP | blogicon-amp | |
f704 | 引用 | blogicon-quote | |
f700 | 箇条書き | blogicon-editor-unorderedlist | |
f701 | 番号付きリスト | blogicon-editor-orderedlist | |
f702 | リンク | blogicon-editor-link | |
f703 | 続きを読む | blogicon-editor-seemore | |
f704 | 引用 | blogicon-editor-blockquote | |
f705 | 脚注 | blogicon-editor-footnote | |
f706 | エディターのツール バー | blogicon-editor-toolbar-show | |
f707 | - | blogicon-editor-toolbar-hide | |
f708 | 太字 | blogicon-editor-bold | |
f709 | 斜体 | blogicon-editor-italic | |
f70a | 打消 | blogicon-editor-strike | |
f70b | 下線 | blogicon-editor-underline | |
f70c | 文字の大きさ | blogicon-editor-fontsize | |
f70d | 文字色 | blogicon-editor-color | |
f710 | その他 | blogicon-others | |
f711 | フォトライフ | blogicon-fotolife | |
f713 | サイドバー開閉 | blogicon-curation-bar-toggle | |
f714 | ペイント | blogicon-paint | |
f715 | レストラン | blogicon-gourmet | |
f716 | Flickr | blogicon-flickr | |
f717 | Gist | blogicon-gist | |
f718 | pixiv | blogicon-pixiv | |
f719 | ミイル | blogicon-miil | |
f71a | YouTube | blogicon-youtube | |
f71b | blogicon-instagram | ||
f71c | Googleフォト | blogicon-google-photos | |
f71d | トグル ON | blogicon-toggle-on | |
f71e | トグル OFF | blogicon-toggle-off | |
f721 | スロット | blogicon-odaislot | |
f722 | 楽天 | blogicon-rakuten | |
f723 | グリッド 3x3 | blogicon-grid-3x3 | |
f724 | グリッド 縦 | blogicon-grid-vertical | |
f725 | 目次 | blogicon-editor-insert-toc | |
f726 | パンくずリスト | blogicon-breadcrumb | |
f727 | ピン留め | blogicon-pinned | |
f728 | プロフィール | blogicon-profilecard | |
f72a | 定型文 | blogicon-snippet | |
f72b | DAZN | blogicon-dazn |
使う可能性が高いアイコンフォントのピックアップ
f00d | デザイン | blogicon-design | |
f00e | 歯車 | blogicon-cog | |
f010 | 編集 | blogicon-edit | |
f017 | ホーム | blogicon-home | |
f018 | スパナ | blogicon-setting | |
f01a | 検索 | blogicon-search | |
f01c | ヘルプ | blogicon-help | |
f01f | お題 | blogicon-odai | |
f024 | ペン | blogicon-pen | |
f041 | 警告 | blogicon-warning | |
f042 | リンク | blogicon-link | |
f04c | ヘルプ | blogicon-help-alt | |
f051 | スマホ | blogicon-smartphone | |
f052 | パソコン | blogicon-laptop | |
f704 | 引用 | blogicon-quote |
ついでに、使えそうな機種に依存しない全角記号
◎ | ∞ | ⇒ | ⇔ | ≪ | ≫ |
○ | □ | ◇ | △ | ▽ | ☆ |
● | ■ | ◆ | ▲ | ▼ | ★ |