WordPressで記事を書いている時にアイコンを使いたい時ってありますよね。
フリーのアイコン画像をダウンロードして、サーバーにアップロードして…という手間が地味に面倒だったりします。
しかし！これから紹介するプラグインがあればそんな手間も一気に解決しちゃいます！
アイコンフォントWordPressプラグイン
『WP Visual Icon Fonts』使い方
- WordPressのメニューから「プラグイン」 icon-arrow-right 「新規追加」をクリックします。
icon-search-plus 拡大してみる
- キーワード検索欄に「WP Visual Icon Fonts」と入力します。
icon-search-plus 拡大してみる
- 検索結果に「WP Visual Icon Fonts」が表示されたら「今すぐインストール」をクリックします。
icon-search-plus 拡大してみる
- インストールが終了したら「有効化」をクリックします。
icon-search-plus 拡大してみる
- 投稿画面に「Icon」ボタンが追加されます。
icon-search-plus 拡大してみる
- 「Icon」ボタンをクリックするとアイコンフォントの一覧が表示されます。使いたいアイコンをクリックすると投稿画面に反映されます。
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-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-rmb icon-road icon-rocket icon-rotate-left icon-rotate-right icon-rouble 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-in 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-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 で
実はこれ入れてるんですけど使ってなかったです(^^;
今更ながら☆の半分があることに気がつきました。映画の評価3.5の時に困っていたんですよ～。
使います！
そう！これはいごっそうさんのための記事ですｗ
僕も映画やドラマのレビュー記事書く時に使おうと思ってインストールしました＾＾
今確認して思い出しましたこのプラグインって3年くらい更新されてないじゃないっすか？
ヤバいかな？と思いのけていたんですけど、大丈夫なものなんですかね？
再度インストールも考えているんですけど、スイマセン変な質問で・・(;・∀・)
フォント数が増えない限り多分更新もないかと思うので大丈夫だと思います。
他のアイコン系プラグインも試したんですけど、使い勝手はこれが一番よかったですよ
(*｀･ω･)
ありがとうございます。