フジブロっ！
はてなブログのカスタマイズに役立つ記事やツール、デザインテーマの制作を行なっている、カスタマイズ専門ブログ
トップ > カスタマイズ > はてなブログで使えるアイコンフォント全125種はてなブログで使えるアイコンフォント全125種
本ページはプロモーションが含まれています- アイコンを大きく表示しているので探しやすい
- アイコンをクリックしてコードをコピーできる
- 使いたい形式に合わせてコードも付与できる
アイコンフォントの使い方
HTMLで使用する方法アイコンフォントをHTMLで使用するにはアイコンに対応したクラス名を タグもしくは タグで囲います。
大きく表示したい場合大きく表示したい場合はCSSを使わなくても、クラス名に lg を加えると大きく表示されます。（間に半角スペースが必要です）
見たまま編集で使用する際の注意点これは タグの間に何もテキストが挟まれていないので、不要な空のタグと判断され自動的に削除されるためです。
その場合は と空白を表す文字を入れると、表示することが出来ます。
…しかし、もう1つ問題があります。表示は出来ますが、今度は タグが強調を表す タグに書き換えられてしまいます。
気にならないようならそのままでも良いのですが タグは、はてなブログのエディター内の の文字をクリックすると付与されるもので、斜体になります。
span > CSSの疑似要素で表示する方法 content: "表示したいアイコンのコード"; font-family: blogicon; .categories a::before < content: "\f022"; font-family: blogicon; >アイコンコードのコピー方法
どの形式でコピーされたか確認しやすいように、コピーしたコードを表示するようにしていますが、クリックした時点でコピーされていますので、表示されたものをコピーし直す必要はありません。 HTML-クラス名 コピーされるコード▽例： blogicon-hatenablog HTML-タグ付き【タグ付き】にチェックを入れた状態でアイコンをクリックすると、タグを付与したコードがコピーされます。
コピーされるコード▽例： HTML-タグ＋lg付き【タグ＋lg付き】にチェックを入れた状態でアイコンをクリックすると、タグにアイコンを大きく表示するlgを付与したコードがコピーされます。
コピーされるコード▽例： HTML-タグ付き（見たまま編集用） コピーされるコード▽例： CSS-コード コピーされるコード▽例： \f000 CSS-表示コード付き コピーされるコード▽例： content: "\f000"; font-family: blogicon;はてなブログで使えるアイコンフォント全125種一覧表
HTML クラス名 タグ付き タグ＋lg付き タグ付き（見たまま編集用） CSS コード 表示コード付き ▽コピーしたコードが表示されます▽ アイコン クラス名 コード 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 \f050 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 \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-others \f710 blogicon-rakuten \f722 blogicon-breadcrumb \f726 blogicon-profilecard \f728 \f729 blogicon-snippet \f72a blogicon-dazn \f72bまとめ
おすすめ記事
はてなブログカスタマイズまとめ-カスタマイズマップを作成しました はてなブログの新しいテーマ【Cappuccino】を公開しました！ 【Cappuccino】着せ替えデザイン12種類 はてなブログ【目次カスタマイズ】コピペで使えるデザイン集 HTMLとCSSのみで作るトップへ戻るボタン【デザイン3種類】 サーチコンソールで「CLS に関する問題」が出た時の対処法 ＼よければシェアお願いします／ フジグチ - ガテン系ブロガー -- Cappuccino
- Neumorphism
Copyright © 2020 fuji-blo.com