はてなブログの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 |
使う頻度が高い自分用のコピペ一覧【はてな記法】
| <i class="blogicon-reorder lg"></i> | |
| <i class="blogicon-cog lg"></i> | |
| <i class="blogicon-entry lg"></i> | |
| <i class="blogicon-home lg"></i> | |
| <i class="blogicon-search lg"></i> | |
| <i class="blogicon-help lg"></i> | |
| <i class="blogicon-info lg"></i> | |
| <i class=blogicon-code lg"></i> | |
| <i class="blogicon-help-alt lg"></i> | |
| <i class="blogicon-smartphone lg"></i> | |
| <i class="blogicon-laptop lg"></i> | |
| <i class="blogicon-snippet lg"></i> |
「管理画面」→「 デザイン」→「 カスタマイズ」 →「 デザインCSS」
▼
- 「管理画面」→「<i class="blogicon-design"></i> デザイン」→「<i class="blogicon-setting"></i> カスタマイズ」 →「<i class="blogicon-bracket"></i> デザインCSS」
ついでに、使えそうな機種に依存しない全角記号
| ◎ | ∞ | ⇒ | ⇔ | ≪ | ≫ |
| ○ | □ | ◇ | △ | ▽ | ☆ |
| ● | ■ | ◆ | ▲ | ▼ | ★ |
