元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

はてなブログのアイコンフォントの使い方

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などを利用してください。