注目の記事 PICK UP!

WordPressで簡単にアイコンフォントが使えるようになるプラグイン『WP Visual Icon Fonts』

アイコンフォントWordPressプラグイン

WordPressで記事を書いている時にアイコンを使いたい時ってありますよね。
フリーのアイコン画像をダウンロードして、サーバーにアップロードして…という手間が地味に面倒だったりします。
しかし!これから紹介するプラグインがあればそんな手間も一気に解決しちゃいます!

アイコンフォントWordPressプラグイン
『WP Visual Icon Fonts』使い方

  1. WordPressのメニューから「プラグイン」 icon-arrow-right 「新規追加」をクリックします。
    アイコンフォントWordPressプラグイン

    icon-search-plus 拡大してみる

  2. キーワード検索欄に「WP Visual Icon Fonts」と入力します。
    アイコンフォントWordPressプラグイン

    icon-search-plus 拡大してみる

  3. 検索結果に「WP Visual Icon Fonts」が表示されたら「今すぐインストール」をクリックします。
    アイコンフォントWordPressプラグイン

    icon-search-plus 拡大してみる

  4. インストールが終了したら「有効化」をクリックします。
    アイコンフォントWordPressプラグイン

    icon-search-plus 拡大してみる

  5. 投稿画面に「Icon」ボタンが追加されます。
    アイコンフォントWordPressプラグイン

    icon-search-plus 拡大してみる

  6. 「Icon」ボタンをクリックするとアイコンフォントの一覧が表示されます。使いたいアイコンをクリックすると投稿画面に反映されます。
    アイコンフォントWordPressプラグイン

    icon-search-plus 拡大してみる

WordPressプラグイン
『WP Visual Icon Fonts』のアイコンフォント一覧

デフォルトのフォントは全部で407個。
(入力し忘れや数え間違えがあるかもしれません^^;)

icon-adjust  icon-adn  icon-align-center  icon-align-justify  icon-align-left  icon-align-right  icon-ambulance  icon-anchor  icon-android  icon-angle-double-down  icon-angle-double-left  icon-angle-double-right  icon-angle-double-up  icon-angle-down  icon-angle-left  icon-angle-right  icon-angle-up  icon-apple  icon-archive  icon-arrow-circle-down  icon-arrow-circle-left  icon-arrow-circle-o-right  icon-arrow-circle-o-up  icon-arrow-circle-right  icon-arrow-circle-up  icon-arrow-down  icon-arrow-left  icon-arrow-right  icon-arrow-up  icon-asterisk  icon-backward  icon-ban  icon-bar-chart-o  icon-barcode  icon-beer  icon-bell  icon-bell-o  icon-bitbucket  icon-bitbucket-square  icon-bitcoin  icon-bold  icon-bolt  icon-book  icon-bookmark  icon-bookmark-o  icon-briefcase  icon-btc  icon-bug  icon-building  icon-bullhorn  icon-bullseye  icon-calendar  icon-calendar-o  icon-camera  icon-camera-retro  icon-caret-down  icon-caret-left  icon-caret-right  icon-caret-square-o-down  icon-caret-square-o-left  icon-caret-square-o-right  icon-caret-square-o-up  icon-caret-up  icon-certificate  icon-chain  icon-chain-broken  icon-check  icon-check-circle  icon-check-circle-o  icon-check-square  icon-check-square-o  icon-chevron-circle-down  icon-chevron-circle-left  icon-chevron-circle-right  icon-chevron-circle-up  icon-chevron-down  icon-chevron-left  icon-chevron-right  icon-chevron-up  icon-circle  icon-circle-o  icon-clipboard  icon-clock-o  icon-cloud  icon-cloud-download  icon-cloud-upload  icon-cny  icon-code  icon-code-fork  icon-coffee  icon-cog  icon-cogs  icon-collapse-o  icon-columns  icon-comment  icon-comment-o  icon-comments  icon-comments-o  icon-compass  icon-copy  icon-credit-card  icon-crop  icon-crosshairs  icon-css3  icon-cut  icon-cutlery  icon-dashboard  icon-dedent  icon-desktop  icon-dollar  icon-dot-circle-o  icon-download  icon-dribbble  icon-dropbox  icon-edit  icon-eject  icon-ellipsis-horizontal  icon-ellipsis-vertical  icon-envelope  icon-envelope-o  icon-eraser  icon-eur  icon-euro  icon-exchange  icon-exclamation  icon-exclamation-circle  icon-exclamation-triangle  icon-expand-o  icon-external-link  icon-external-link-square  icon-eye  icon-eye-slash  icon-facebook  icon-facebook-square  icon-fast-backward  icon-fast-forward  icon-female  icon-fighter-jet  icon-file  icon-file-o  icon-file-text  icon-file-text-o  icon-files-o  icon-film  icon-filter  icon-fire  icon-fire-extinguisher  icon-flag  icon-flag-checkered  icon-flag-o  icon-flash  icon-flask  icon-flickr  icon-floppy-o  icon-folder  icon-folder-o  icon-folder-open  icon-folder-open-o  icon-font  icon-forward  icon-foursquare  icon-frown-o  icon-fullscreen  icon-gamepad  icon-gavel  icon-gbp  icon-gear  icon-gears  icon-gift  icon-github  icon-github-alt  icon-github-square  icon-gittip  icon-glass  icon-globe  icon-google-plus  icon-google-plus-square  icon-group  icon-h-square  icon-hand-o-down  icon-hand-o-left  icon-hand-o-right  icon-hand-o-up  icon-hdd-o  icon-headphones  icon-heart  icon-heart-o  icon-home  icon-hospital  icon-html5  icon-inbox  icon-indent  icon-info  icon-info-circle  icon-inr  icon-instagram  icon-italic  icon-jpy  icon-key  icon-keyboard-o  icon-krw  icon-laptop  icon-leaf  icon-legal  icon-lemon-o  icon-level-down  icon-level-up  icon-lightbulb-o  icon-link  icon-linkedin  icon-linkedin-square  icon-linux  icon-list  icon-list-alt  icon-list-ol  icon-list-ul  icon-location-arrow  icon-lock  icon-long-arrow-down  icon-long-arrow-left  icon-long-arrow-right  icon-long-arrow-up  icon-magic  icon-magnet  icon-mail-forward  icon-mail-reply  icon-mail-reply-all  icon-male  icon-map-marker  icon-maxcdn  icon-medkit  icon-meh-o  icon-microphone  icon-microphone-slash  icon-minus  icon-minus-circle  icon-minus-square  icon-minus-square-o  icon-mobile  icon-mobile-phone  icon-money  icon-moon-o  icon-move  icon-music  icon-outdent  icon-pagelines  icon-paperclip  icon-paste  icon-pause  icon-pencil  icon-pencil-square  icon-pencil-square-o  icon-phone  icon-phone-square  icon-picture-o  icon-pinterest  icon-pinterest-square  icon-plane  icon-play  icon-play-circle  icon-play-circle-o  icon-plus  icon-plus-circle  icon-plus-square  icon-power-off  icon-print  icon-puzzle-piece  icon-qrcode  icon-question  icon-question-circle  icon-quote-left  icon-quote-right  icon-random  icon-refresh  icon-renren  icon-reorder  icon-repeat  icon-reply  icon-reply-all  icon-resize-full  icon-resize-horizontal  icon-resize-small  icon-resize-vertical  icon-retweet  icon-rmb  icon-road  icon-rocket  icon-rotate-left  icon-rotate-right  icon-rouble  icon-rss  icon-rss-square  icon-rub  icon-ruble  icon-rupee  icon-save  icon-scissors  icon-search  icon-search-minus  icon-search-plus  icon-share  icon-share-square  icon-share-square-o  icon-shield  icon-shopping-cart    icon-sign-out  icon-signal  icon-sitemap  icon-skype  icon-smile-o  icon-sort  icon-sort-alpha-asc  icon-sort-alpha-desc  icon-sort-amount-asc  icon-sort-amount-desc  icon-sort-asc  icon-sort-desc  icon-sort-down  icon-sort-numeric-asc  icon-sort-numeric-desc  icon-sort-up  icon-spinner  icon-square  icon-square-o  icon-stack-exchange  icon-stack-overflow  icon-star  icon-star-half  icon-star-half-empty  icon-star-half-full  icon-star-half-o  icon-star-o  icon-step-backward  icon-step-forward  icon-stethoscope  icon-stop  icon-strikethrough  icon-subscript  icon-suitcase  icon-sun-o  icon-superscript  icon-table  icon-tablet  icon-tachometer  icon-tag  icon-tags  icon-tasks  icon-terminal  icon-text-height  icon-text-width  icon-th  icon-th-large  icon-th-list  icon-thumb-tack  icon-thumbs-down  icon-thumbs-o-down  icon-thumbs-o-up  icon-thumbs-up  icon-ticket  icon-times  icon-times-circle  icon-times-circle-o  icon-tint  icon-toggle-down  icon-toggle-left  icon-toggle-right  icon-toggle-up  icon-trash-o  icon-trello  icon-trophy  icon-truck  icon-try  icon-tumblr  icon-tumblr-square  icon-turkish-lira  icon-twitter  icon-twitter-square  icon-umbrella  icon-underline  icon-undo  icon-unlink  icon-unlock  icon-unlock-o  icon-unsorted  icon-upload  icon-usd  icon-user  icon-user-md  icon-video-camera  icon-vimeo-square  icon-vk  icon-volume-down  icon-volume-off  icon-volume-up  icon-warning  icon-weibo  icon-wheelchair  icon-windows  icon-won  icon-wrench  icon-xing  icon-xing-square  icon-yen  icon-youtube  icon-youtube-play  icon-youtube-square

 icon-info-circle フォントサイズや色を変えることができます。
          

 icon-play リンクボタンとして使うことももちろん可能です icon-heart 
YouTubeを見るicon-youtube-square

雑記

アイコンフォントを適材適所に使うだけで記事も見やすく、わかりやすく伝えることができるようになりますね。
アイコン画像をアップロードしたり、アップロード済みのアイコン画像を探す手間も省けるので是非インストールしてみてください。

この記事が気に入ったら
いいね!してくださるとうれしいです(^▽^)

Twitter で

関連記事

  1. ワードプレステーマ削除方法

    WordPress (ワードプレス)テーマ削除方法

  2. 1万PV達成

    ブログ開始から2ヶ月目で月間10,000PVをクリアできた!ちょっとだけ分析してみよう!

  3. ワードプレステーマ調べる

    気になるあのブログのWordPressのテーマやプラグインは何使ってるの?を簡単に教えてくれる『Wo…

  4. WordPressでリンク先のサムネイルも表示できるプラグイン『Pz-LinkCard』初心者向け解…

  5. ワードプレスのパーマリンクおすすめ設定

    WordPressのパーマリンクのおすすめ設定は?

  6. WORDPRESSプラグインSpeech bubbleカスタマイズ

    WORDPRESS吹き出し会話プラグイン「Speech Bubble」の吹き出しの色変更

  7. WordPressにログインできない「予期しない出力によりCookiesがブロックされました」エラー…

  8. WordPress4.72 脆弱性

    WordPress(ワードプレス)脆弱性対策のためにWordPress4.72への更新が必須!

コメント

  1. 実はこれ入れてるんですけど使ってなかったです(^^;
    今更ながら☆の半分があることに気がつきました。映画の評価3.5の時に困っていたんですよ~。
    使います!

      • gadgetjet
      • 2017年 2月 20日

      そう!これはいごっそうさんのための記事ですw
      僕も映画やドラマのレビュー記事書く時に使おうと思ってインストールしました^^

  2. 今確認して思い出しましたこのプラグインって3年くらい更新されてないじゃないっすか?
    ヤバいかな?と思いのけていたんですけど、大丈夫なものなんですかね?
    再度インストールも考えているんですけど、スイマセン変な質問で・・(;・∀・)

      • gadgetjet
      • 2017年 2月 20日

      フォント数が増えない限り多分更新もないかと思うので大丈夫だと思います。
      他のアイコン系プラグインも試したんですけど、使い勝手はこれが一番よかったですよ
      (*`・ω・)

  1. この記事へのトラックバックはありません。

GadgetJet Twitter

GadgetJet Google+

PAGE TOP