はてなで使えるアイコン(WEBフォント)・Font Awesome

f:id:naominoffice:20200920182821p:plain

グローバルメニューとかで見るアイコンってどうやって出すの?

はてなブログでは元々使えるアイコンがあるにゃ

はてなブログで使えるアイコン

↓ こんなのです

↓ メニューバーなどで良く見るアイコンです ↓ f:id:naominoffice:20200920174212p:plain

使い方

使い方

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