はてなで使えるアイコン(WEBフォント)・Font Awesome
グローバルメニューとかで見るアイコンってどうやって出すの?
はてなブログでは元々使えるアイコンがあるにゃ
はてなブログで使えるアイコン
↓ こんなのです
↓ メニューバーなどで良く見るアイコンです ↓
使い方
使い方
HTML が使える場所では下記のコードをコピペして、下の表から好きな図柄の クラス名 をクラス名にコピペしてください
<i class="クラス名"></i>
記入例)
<i class="blogicon-home">HOME</i> HOMEデザインテンプレートや他の人が作成したメニューバーなどを使用する場合、 cssがすでに設定されている時 などは下記のタグを使用します
<span class="クラス名"></span>
記入例)
<span class="blogicon-home">HOME</span> HOME
アイコンのコード一覧
アイコン | クラス名 |
---|---|
blogicon-hatenablog | blogicon-plus | blogicon-minus | blogicon-reorder | blogicon-grid | blogicon-chevron-left | blogicon-chevron-right | blogicon-chevron-up | blogicon-chevron-down | blogicon-external | blogicon-plugin | blogicon-member | blogicon-account | blogicon-design | blogicon-cog | blogicon-edit | blogicon-addstar | blogicon-subscribe | blogicon-entry | blogicon-notify | blogicon-private | blogicon-user | blogicon-home | blogicon-setting | blogicon-draft | blogicon-search | blogicon-analytics | blogicon-help | blogicon-comment | blogicon-import | blogicon-truck | blogicon-group | blogicon-folder | blogicon-add | blogicon-pen | blogicon-close | blogicon-trash | blogicon-bookmark | blogicon-redirect | blogicon-check | blogicon-crop | blogicon-repeat | blogicon-logout | blogicon-star | blogicon-pro | blogicon-myblog | blogicon-recent | blogicon-info | blogicon-good | blogicon-amazon | blogicon-twitter | blogicon-facebook | blogicon-share | blogicon-code | blogicon-list | blogicon-calendar | blogicon-bracket | blogicon-photo | blogicon-color | blogicon-public | blogicon-realtime-preview | blogicon-warning | blogicon-link | blogicon-time | blogicon-markdown | blogicon-evernote | blogicon-music | blogicon-niconico | blogicon-heart | blogicon-heart-alt | blogicon-tag | blogicon-mail | blogicon-help-alt | blogicon-sushi | blogicon-rss | blogicon-smartphone | blogicon-laptop | blogicon-mixi | blogicon-haiku | blogicon-amp | blogicon-editor-unorderedlist | blogicon-editor-orderedlist | blogicon-editor-link | blogicon-editor-seemore | blogicon-quote | blogicon-editor-blockquote | blogicon-editor-footnote | blogicon-editor-toolbar-show | blogicon-editor-toolbar-hide | blogicon-editor-bold | blogicon-editor-italic | blogicon-editor-strike | blogicon-editor-underline | blogicon-editor-fontsize | blogicon-editor-color | blogicon-others | blogicon-fotolife | blogicon-curation-bar-toggle | blogicon-paint | blogicon-gourmet | blogicon-flickr | blogicon-gist | blogicon-pixiv | blogicon-miil | blogicon-youtube | blogicon-instagram | blogicon-google-picker | blogicon-toggle-on | blogicon-toggle-off | blogicon-star-o | blogicon-odaislot | blogicon-rakuten | blogicon-grid-3x3 | blogicon-grid-vertical | blogicon-editor-insert-toc | blogicon-breadcrumb | blogicon-pinned | blogicon-profilecard | blogicon-snippet |
Font Awesomeを使用する
はてなアイコンだけではデザインが足りない場合はFont Awesomeを使用するとデザインが色々と選べるようになります
ただ、はてなブログの場合はそのままコードをコピペしても使用できないのでご注意下さい
fontawesome.com
こちらの方のブログにはてなブログでの使用方法が詳しく書いてありますので興味のある方はどうぞ redo5151.hatenablog.com