THE THORでのアイコンの使い方を解説！！【標準装備アイコン一覧】

マーシー
この記事ではTHETHORの【アイコン】の使い方について紹介しているよ！！
THETHOR 特別大感謝祭セール開催中！！

WordPressの有料テーマ「THETHOR(ザ・トール)」が特別大感謝祭セールでお買い得になっています！！WordPressの有料テーマを探している方は今がお得！！

　特別大感謝祭セール内容

期限：令和2年10月1日～10月31日

\ CHECK IT /
THETHOR 公式ページ

アイコンの使い方

THE THORでは簡単にアイコンを使用することができます。基本的な使い方を紹介しますのでぜひ試してみて下さい。

注意点

現在、THETHORはWordPressの新しいエディタGutenberg(グーテンベルク)に対応していない為、クラシックエディターでの使い方の説明になります。

基本的な使い方

エディタ画面でクラシックを選択する

エディター画面で「クラシック」を選択します。クラシックを使用することでTHETHORの機能を使用できます。

クラシック画面中のアイコン挿入をクリックする

画面中央にある「アイコン挿入」をクリックします。

表示させたいアイコンのクラス名を入力する

アイコン入力の画面になりますので、使用したいアイコンのクラス名を入力します。

基本的なアイコンの使用方法は上記の方法ですが、もっと自由に使用したい方はアイコンのクラス名・Unicodeの使い方を別記事で詳しく解説しているので合わせて読みたい！！から進んでね！！

\ 合わせて読みたい！！   /
THETHORのアイコンコード【クラス名】の使い方を詳しく解説！！
THETHORのアイコンコード【Unicode】の使い方を詳しく解説！！

THE THOR アイコン一覧

THE THORには498種類のアイコンが標準装備されています。Font Awesomeでは1000種類以上のアイコンが無料で利用できますが、同じようなアイコンであればTHE THORに標準装備されているアイコンで十分ですね。

▼ アイコンのカテゴリー一覧

  • 基本アイコン
  • 建物・乗り物アイコン
  • 読込・AV機器アイコン
  • オーディオ系アイコン
  • 人・顔アイコン
  • 矢印・コメントアイコン
  • ロゴアイコン

下記の「クリックして表示」をクリックすると標準装備のアイコンとクラス名が表示されますので、カスタマイズする方はクラス名をコピペして使用して下さい。

クラス名

基本アイコン
    
icon-quotationicon-quotation2icon-newspapericon-pencil
    
icon-pencil2icon-quillicon-penicon-blog
    
icon-eyedroppericon-dropleticon-paint-formaticon-image
    
icon-imagesicon-filmicon-diceicon-bullhorn
    
icon-bookicon-booksicon-carticon-credit-card
    
icon-lifebuoyicon-phoneicon-phone-hang-upicon-address-book
    
icon-musicicon-playicon-pacmanicon-spades
    
icon-clubsicon-diamondsicon-hearticon-heart-broken
    
icon-star-emptyicon-star-halficon-star-fullicon-connection
    
icon-podcasticon-feedicon-file-texticon-file-text2
    
icon-profileicon-file-emptyicon-files-emptyicon-file-picture
    
icon-file-musicicon-file-playicon-file-videoicon-file-zip
    
icon-copyicon-pasteicon-stackicon-folder
    
icon-folder-openicon-folder-plusicon-folder-minusicon-folder-download
    
icon-folder-uploadicon-tagicon-price-tagsicon-barcode
    
icon-qrcodeicon-ticketicon-coin-dollaricon-coin-euro
    
icon-coin-poundicon-coin-yenicon-calculatoricon-pushpin
    
icon-locationicon-location2icon-mapicon-map2
    
icon-updateicon-clockicon-clock2icon-alarm
    
icon-bellicon-stopwatchicon-calendaricon-drawer
    
icon-drawer2icon-box-addicon-box-removeicon-floppy-disk
    
icon-driveicon-databaseicon-hour-glassicon-zoom-in
    
icon-zoom-outicon-enlargeicon-enlarge2icon-shrink
    
icon-shrink2icon-keyicon-key2icon-lock
    
icon-unlockedicon-wrenchicon-equalizericon-equalizer2
    
icon-hammericon-hammer2icon-magic-wandicon-aid-kit
    
icon-bugicon-pie-charticon-stats-dotsicon-stats-bars
    
icon-stats-bars2icon-trophyicon-gifticon-glass
    
icon-glass2icon-metericon-meter2icon-fire
    
icon-labicon-magneticon-binicon-bin2
    
icon-briefcaseicon-shieldicon-roadicon-power
    
icon-power-cordicon-switchicon-list-numberedicon-list
    
icon-list2icon-menuicon-menu2icon-menu3
    
icon-menu4icon-menu5icon-newicon-close
    
icon-compassicon-compass2icon-view_cardicon-view_wide
    
icon-view_normalicon-binocularsicon-searchicon-search2
    
icon-cogicon-cupicon-spoon-knifeicon-leaf
    
icon-accessibilityicon-targeticon-clipboardicon-tree
    
icon-cloudicon-cloud-downloadicon-cloud-uploadicon-cloud-check
    
icon-downloadicon-download2icon-download3icon-upload
    
icon-upload2icon-upload3icon-sphereicon-earth
    
icon-linkicon-flagicon-attachmenticon-eye
    
icon-eye-plusicon-eye-minusicon-eye-blockedicon-bookmark
    
icon-bookmarksicon-sunicon-contrasticon-brightness-contrast
    
icon-warningicon-notificationicon-questionicon-plus
    
icon-minusicon-infoicon-cancel-circleicon-blocked
    
icon-crossicon-checkmarkicon-checkmark2icon-spell-check
    
icon-entericon-exiticon-tabicon-move-up
    
icon-move-downicon-sort-alpha-ascicon-sort-alpha-descicon-sort-numeric-asc
    
icon-sort-numberic-descicon-sort-amount-ascicon-sort-amount-descicon-command
    
icon-shifticon-ctrlicon-opticon-checkbox-checked
    
icon-checkbox-uncheckedicon-radio-checkedicon-radio-checked2icon-radio-unchecked
    
icon-cropicon-make-groupicon-ungroupicon-scissors
    
icon-filtericon-fonticon-ligatureicon-ligature2
    
icon-text-heighticon-text-widthicon-font-sizeicon-bold
    
icon-underlineicon-italicicon-strikethroughicon-omega
    
icon-sigmaicon-page-breakicon-superscripticon-superscript2
    
icon-subscripticon-subscript2icon-text-coloricon-pagebreak
    
icon-clear-formattingicon-tableicon-table2icon-insert-template
    
icon-pilcrowicon-ltricon-rtlicon-section
    
icon-paragraph-lefticon-paragraph-centericon-paragraph-righticon-paragraph-justify
    
icon-indent-increaseicon-indent-decreaseicon-shareicon-share2
    
icon-new-tabicon-embedicon-embed2icon-terminal
    
icon-cogsicon-mailicon-mail2icon-mail3
    
icon-mail4icon-mail5  
建物・乗り物アイコン
    
icon-homeicon-home2icon-home3icon-office
    
icon-libraryicon-rocketicon-airplaneicon-truck
読込・AV機器アイコン
   
icon-loop2icon-spinnericon-spinner2icon-spinner3
    
icon-spinner4icon-spinner5icon-spinner6icon-spinner7
    
icon-spinner8icon-spinner9icon-spinner10icon-spinner11
    
icon-displayicon-laptopicon-mobileicon-mobile2
    
icon-tableticon-tvicon-cameraicon-headphones
    
icon-video-cameraicon-micicon-printericon-keyboard
オーディオ系アイコン
    
icon-play2icon-play3icon-pauseicon-pause2
    
icon-stopicon-stop2icon-previousicon-previous2
    
icon-nexticon-next2icon-backwardicon-backward2
    
icon-firsticon-forward2icon-forward3icon-last
    
icon-ejecticon-volume-highicon-volume-mediumicon-volume-low
    
icon-volume-muteicon-volume-mute2icon-volume-increaseicon-volume-decrease
    
icon-loopicon-infiniteicon-shuffle 
人・顔アイコン
    
icon-usericon-usersicon-user-plusicon-user-minus
    
icon-user-checkicon-user-tieicon-manicon-woman
    
icon-man-womanicon-happyicon-happy2icon-smile
    
icon-smile2icon-tongueicon-tongue2icon-sad
    
icon-sad2icon-winkicon-wink2icon-grin
    
icon-grin2icon-coolicon-cool2icon-angry
    
icon-angry2icon-evilicon-evil2icon-shocked
    
icon-shocked2icon-baffledicon-baffled2icon-confused
    
icon-confused2icon-neutralicon-neutral2icon-hipster
    
icon-hipster2icon-wonderingicon-wondering2icon-sleepy
    
icon-sleepy2icon-frustratedicon-frustrated2icon-crying
    
icon-crying2   
矢印・コメントアイコン
    
icon-point-upicon-point-righticon-point-downicon-point-left
    
icon-arrow-up-lefticon-arrow-up-left2icon-arrow-upicon-arrow-up2
    
icon-arrow-up-righticon-arrow-up-right2icon-arrow-righticon-arrow-right2
    
icon-arrow-down-righticon-arrow-down-right2icon-arrow-downicon-arrow-down2
    
icon-arrow-down-lefticon-arrow-down-left2icon-arrow-lefticon-arrow-left2
    
icon-circle-upicon-circle-righticon-circle-downicon-circle-left
    
icon-undoicon-undo2icon-forwardicon-reply
    
icon-redoicon-redo2icon-bubbleicon-bubble2
    
icon-bubblesicon-bubbles2icon-bubbles3icon-bubbles4
ロゴアイコン
    
icon-amazonicon-googleicon-google2icon-google-plus
    
icon-google-plus2icon-hangoutsicon-google-driveicon-facebook
    
icon-facebook2icon-instagramicon-whatsappicon-spotify
    
icon-telegramicon-twittericon-feedlyicon-pocket
    
icon-hatenabookmarkicon-hatenabookmark2icon-lineicon-vine
    
icon-vkicon-renrenicon-sina-weiboicon-rss
    
icon-rss2icon-youtubeicon-twitchicon-vimeo
    
icon-vimeo2icon-lanyrdicon-flickricon-flickr2
    
icon-flickr3icon-flickr4icon-dribbbleicon-behance
    
icon-behance2icon-deviantarticon-500pxicon-steam
    
icon-steam2icon-dropboxicon-onedriveicon-github
    
icon-npmicon-basecampicon-trelloicon-wordpress
    
icon-joomlaicon-elloicon-bloggericon-blogger2
    
icon-tumblricon-tumblr2icon-yahooicon-yahoo2
    
icon-tuxicon-appleincicon-findericon-android
    
icon-windowsicon-windows8icon-soundcloudicon-soundcloud2
    
icon-skypeicon-redditicon-hackernewsicon-wikipedia
    
icon-linkedinicon-linkedin2icon-lastfmicon-lastfm2
    
icon-deliciousicon-stumbleuponicon-stumbleupon2icon-stackoverflow
    
icon-pinteresticon-pinterest2icon-xingicon-xing2
    
icon-flattricon-foursquareicon-yelpicon-paypal
    
icon-chromeicon-firefoxicon-IEicon-edge
    
icon-safariicon-operaicon-file-pdficon-file-openoffice
    
icon-file-wordicon-file-excelicon-libreofficeicon-html-five
    
icon-html-five2icon-css3icon-giticon-codepen

クラス名だけではなく、Unicodeも合わせてパッ！！と確認できるページを別に作成していますのでアイコンをカスタマイズしたい方は上手く活用してね！！

\ 合わせて読みたい！！  /

THETHORのアイコンコード一覧！！【クラス名・Unicode】

アイコンをカスタマイズ

CSSとHTMLを使って色と文字サイズを変更するカスタマイズ方法を紹介します。まずはCSSで「どの部分の、何を、どう変えるのか」を指定します。

ポイント

カスタマイズのCSSの記載は「追加CSS」で正常に動作する事を確認した上で、子テーマのスタイルシートに記載しましょう。

基本的なカスタマイズ

STEP①

CSSを指定する。

CSSはセレクター、プロパティ、値の3つで組み立てます。今回は「〇〇〇」のセレクターの部分にカスタマイズしたいアイコンのクラス名を記入します。

セレクターのアイコンクラス名の頭には「 . (ドット)」が必要になります。下記にCSSのソースコードを貼っておきますのでコピペして使用して下さい。

.〇〇〇 { color: red; font-size: 10px;}

色の変更は「color: 〇〇〇;」の部分を好きな色に張り替えて下さい。変更の仕方は色の名前で指定するか、#から始まるカラーコードで指定します。参考になる「WEB色見本原色大辞典」のリンクを貼っておきますので、気になる方はどうぞ！！

WEB色見本 原色大辞典 – HTMLカラーコード

サイズの変更は「font-size: 〇〇〇px;」の部分の数値を変更して下さい。単位は「px」「em」「%」などがありますが、基準サイズと関係なく絶対値として設定される「px」を使用しています。用途に合わせて変更して下さい。

STEP②

HTMLを記載する。
<span class="〇〇〇"></span>

「span class=”〇〇〇”」の〇〇〇にアイコンのクラス名を入れて貼り付けて下さい。こうすることで、CSSで指定した色とサイズが反映されたアイコンを好きな場所に表示することができます。

マーシー
基本的なアイコンの使い方、カスタマイズの方法を紹介したけど、無事アイコンは表示できたかな？

この記事ではTHETHORに標準搭載されているアイコンの基本的な使い方、カスタマイズ方法を紹介しました。もっと自由にアイコンを使いたい方は別記事で詳しく解説していますので確認してみて下さいね！！

\ 合わせて読みたい！！   /

THETHORのアイコンコード【クラス名】の使い方を詳しく解説！！

THETHORのアイコンコード【Unicode】の使い方を詳しく解説！！

THETHORのアイコンをカスタマイズする方法！！【サイズ・色】

THETHOR関連記事！！