この記事では、はてなブログで利用が可能なアイコンフォント全124種と、その使い方をまとめています。はてなブログを利用している方であれば、設定等の必要はなく、コードを打ち込むだけで表示させることができるため、とてもおすすめです。
ちなみに、もっと色々なアイコンフォントを使ってみたい方向けに、無料で利用が可能なWEBアイコンフォント「Font Awesome」の使い方を下の記事でまとめています。ぜひ参考にしてみてください！
はてなブログのアイコンフォント全124種と使い方【はてなブログのカスタマイズ】
はてなブログのアイコンフォント素材一覧
| アイコン | クラス名 | コード |
|---|---|---|
| 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-odai | f01f | |
| 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-pages | f00f | |
| 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-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 | |
| コードのみ | f050 | |
| blogicon-smartphone | f051 | |
| blogicon-laptop | f052 | |
| blogicon-mixi | f053 | |
| blogicon-haiku | f054 | |
| blogicon-amp | f055 | |
| blogicon-editor-unorderedlist | f700 | |
| blogicon-editor-orderedlist | f701 | |
| blogicon-editor-link | f702 | |
| blogicon-editor-seemore | f703 | |
| blogicon-editor-blockquote | f704 | |
| blogicon-quote | 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-others | f710 | |
| blogicon-fotolife | f711 | |
| コードのみ | f712 | |
| 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-toggle-on | f71d | |
| blogicon-toggle-off | f71e | |
| blogicon-star-o | f720 | |
| blogicon-odaislot | f721 | |
| blogicon-rakuten | f722 | |
| blogicon-grid-3x3 | f723 | |
| blogicon-grid-vertical | f724 | |
| blogicon-editor-insert-toc | f725 | |
| blogicon-breadcrumb | f726 | |
| blogicon-pinned | f727 | |
| blogicon-profilecard | f728 | |
| コードのみ | f729 | |
| blogicon-snippet | f72a | |
| blogicon-dazn | f72b |
はてなブログのアイコンフォントの使い方
アイコンフォントを表示させる方法は、HTMLのみで表示させる場合と、HTMLとCSSで表示させる場合の2通りあります。HTMLのみで表示させる場合は、手間がかからないという利点がありますが、アイコンフォントを大きくしたり、色付けする時に使いずらいため、基本的にはHTMLとCSSを利用したやり方がおすすめです。
使い方①：HTMLのみで表示させる
HTMLのみでアイコンフォントを表示させる場合は、下のコードに表示させたいアイコンフォントのクラス名を入力し、表示させたい場所に貼り付けて下さい。
<i class="表示させたいアイコンのクラス名"></i>
私の場合は、上の画像のような感じで、HTMLとCSSで作成したヘッダーに使ったりしています。webアイコンフォントがないと、味気ないデザインになってしまいそうです。
下の記事では、HTMLとCSSのみでヘッダーを作成する方法をまとめていますので、ぜひ参考にしてください。
HTMLとCSSで表示させる
アイコンフォントを大きくしたり、色を付けたい場合は、まず始めに下のHTMLコードを表示させたい場所に貼り付け、下記のCSSコードをはてなブログのデザインCSS欄に貼り付けます。また、contentには、自分の表示させたいフォントアイコンのコード名を入力して下さい。
HTMLコード↓
<span class="sample"></span>
CSSコード↓
.sample: before { font-family: blogicon; content: "\f000";
}
記事の中で表示させる
はてなブログのアイコンフォントを記事の中に表示させる場合は、下のコードに表示させたいアイコンフォントのクラス名を入力し、記事の中に貼り付けて下さい。
<em class="表示させたいアイコンのクラス名"></em>
上手く表示されない場合に考えられる問題点
CSSのcontentを入力する際に"＼"バックスラッシュを消してしまっている
CSSで表示させたいアイコンフォントを入力する際には、必ず"＼"を入力するようにしてください。
リゾートバイト歴は5年で、これまでに4つの職場を経験しました。海沿いにある旅館や、スキー場の中にあるホテルなど、宿泊施設をメインにリゾートバイトをしています。現在は長野県のホテルで彼女とリゾートバイトをしています。