HTMLのiタグで使う
<!-- 記述例 --> <i class="blogicon-hatenablog"></i>はてなブログ
クラス名を使いたいアイコンフォントのクラス名に変更します。クラス名はアイコンフォント一覧を見てください。
表示例:はてなブログ
当ブログでは、グローバルメニューのところで利用しています。
CSSの疑似要素で使う
/* 記述例 */ .tag:before { font-family: "blogicon"; content: "\f000"; }
アイコンをフォント化したものを読み込んでいます。フォントになっているので、文字と同様にCSSで色を変えたり、大きさを変えたりできます。
表示例:当ブログでは、カテゴリのタグの表示で利用しています。
はてなブログのアイコンフォント一覧
はてなブログのアイコンフォントの一覧です。クラス名とコードを適宜利用してください。変更情報は公式で発表していないと思われます。以下は2020年10月時点の情報です。
| アイコン | クラス名 | コード |
|---|---|---|
| blogicon-hatenablog | f000 | |
| blogicon-plus | f001 | |
| blogicon-minus | f002 | |
| blogicon-reorder | f003 | |
| blogicon-grid | f004 | |
| blogicon-chevron-left | f005 | |
| blogicon-chevron-right | f006 | |
| blogicon-chevron-up | f007 | |
| blogicon-chevron-down | f008 | |
| blogicon-external | f009 | |
| blogicon-plugin | f00a | |
| blogicon-member | f00b | |
| blogicon-account | f00c | |
| blogicon-design | f00d | |
| blogicon-cog | f00e | |
| blogicon-pages | f00f | |
| blogicon-edit | f010 | |
| blogicon-addstar | f011 | |
| blogicon-subscribe | f012 | |
| blogicon-entry | f013 | |
| blogicon-notify | f014 | |
| blogicon-private | f015 | |
| blogicon-user | f016 | |
| blogicon-home | f017 | |
| blogicon-setting | f018 | |
| blogicon-draft | f019 | |
| blogicon-search | f01a | |
| blogicon-analytics | f01b | |
| blogicon-help | f01c | |
| blogicon-comment | f01d | |
| blogicon-import | f01e | |
| blogicon-odai | f01f | |
| blogicon-truck | f020 | |
| blogicon-group | f021 | |
| blogicon-folder | f022 | |
| blogicon-add | f023 | |
| blogicon-pen | f024 | |
| blogicon-close | f025 | |
| blogicon-trash | f026 | |
| blogicon-bookmark | f027 | |
| blogicon-redirect | f028 | |
| blogicon-check | f029 | |
| blogicon-crop | f02a | |
| blogicon-repeat | f02b | |
| blogicon-logout | f02c | |
| blogicon-star | f02d | |
| blogicon-star-o | f720 | |
| blogicon-pro | f02e | |
| blogicon-myblog | f030 | |
| blogicon-recent | f031 | |
| blogicon-info | f032 | |
| blogicon-good | f033 | |
| blogicon-amazon | f034 | |
| blogicon-twitter | f035 | |
| blogicon-facebook | f036 | |
| blogicon-share | f037 | |
| blogicon-code | f038 | |
| blogicon-list | f039 | |
| blogicon-calendar | f03a | |
| blogicon-bracket | f03b | |
| blogicon-photo | f03c | |
| blogicon-color | f03d | |
| blogicon-public | f03e | |
| blogicon-realtime-preview | f040 | |
| blogicon-warning | f041 | |
| blogicon-link | f042 | |
| blogicon-time | f043 | |
| blogicon-markdown | f044 | |
| blogicon-evernote | f045 | |
| blogicon-music | f046 | |
| blogicon-niconico | f047 | |
| blogicon-heart | f048 | |
| blogicon-heart-alt | f049 | |
| blogicon-tag | f04a | |
| blogicon-mail | f04b | |
| blogicon-help-alt | f04c | |
| blogicon-sushi | f04d | |
| blogicon-rss | f04e | |
| blogicon-smartphone | f051 | |
| blogicon-laptop | f052 | |
| blogicon-mixi | f053 | |
| blogicon-haiku | f054 | |
| blogicon-amp | f055 | |
| blogicon-quote | f704 | |
| blogicon-toggle-on | f71d | |
| blogicon-toggle-off | f71e | |
| blogicon-odaislot | f721 | |
| blogicon-grid-3x3 | f723 | |
| blogicon-grid-vertical | f724 | |
| blogicon-pinned | f727 | |
| blogicon-editor-unorderedlist | f700 | |
| blogicon-editor-orderedlist | f701 | |
| blogicon-editor-link | f702 | |
| blogicon-editor-seemore | f703 | |
| blogicon-editor-blockquote | f704 | |
| blogicon-editor-footnote | f705 | |
| blogicon-editor-toolbar-show | f706 | |
| blogicon-editor-toolbar-hide | f707 | |
| blogicon-editor-bold | f708 | |
| blogicon-editor-italic | f709 | |
| blogicon-editor-strike | f70a | |
| blogicon-editor-underline | f70b | |
| blogicon-editor-fontsize | f70c | |
| blogicon-editor-color | f70d | |
| blogicon-editor-insert-toc | f725 | |
| blogicon-fotolife | f711 | |
| blogicon-curation-bar-toggle | f713 | |
| blogicon-paint | f714 | |
| blogicon-gourmet | f715 | |
| blogicon-flickr | f716 | |
| blogicon-gist | f717 | |
| blogicon-pixiv | f718 | |
| blogicon-miil | f719 | |
| blogicon-youtube | f71a | |
| blogicon-instagram | f71b | |
| blogicon-google-photos | f71c | |
| blogicon-others | f710 | |
| blogicon-rakuten | f722 | |
| blogicon-breadcrumb | f726 | |
| blogicon-profilecard | f728 | |
| blogicon-snippet | f72a | |
| blogicon-dazn | f72b |
備考
上記のアイコンフォントは、はてなブログにデフォルトで読み込まれているものです。当ブログでは、始めから読み込まれているアイコンフォントを使っています。使いたいアイコンフォントがない場合は、Font Awesomeなどを利用してください。
