SWELLアイコン一覧。ショートコードとCSSがコピペで使える。

WordPressテーマ「SWELL」で用意されているオリジナルアイコンを一覧でまとめました。

パッと使いたいなと思ったので、ショートコードとCSSのコードをコピペで使えるように整理したところ、なかなか便利なページになったので個人的にブックマークして使っています。

ほぼ自分用のメモですが、よろしければご活用ください。

  • カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
  • カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。
  • 「そもそもSWELLとは」については、下記の記事をご参考ください。
時間割

\ この記事を書いた人 /

たくろー
Webディレクター
ライティングから編集、校正、ディレクション、SEO対策、アクセス解析、撮影、画像編集、Web制作と、なんでもやってるwebディレクターです。
現在はIT企業でインハウスSEO担当兼、メディア運営責任者・編集者として働きながら、札幌でWebライティングの講師として活動。「良いWebライターが増えれば仕事が楽になるなぁ」と思いながら、一人でひっそりと文亭を運営中。著書『Webライターが書いてはいけない文章28選』

SWELLで使えるアイコンの種類と使い方

SWELLでは、オリジナルのものとFont Awesomeのもの、2種類のアイコンが使えるよう用意されています。

オリジナルアイコンの使い方

SWELLでは、icomoonで作成されたオリジナルアイコンをショートコードで呼び出せるようになっています。

ショートコードで使う場合、下記いずれかのコードになります。

[icon アイコン名]
or
[アイコン アイコン名]

あるいはCSSで表示させる場合は、下記の記述になります。

セレクタ{
font-family: icomoon;
content: "\e921";
}

特定のアイコンのCSS用コードを知りたい場合は、下記のようにデベロッパーツールをつかって調べます。

今回はこの手間を省くために、コピペで使えるよう一覧で整理しました。

Font Awesomeの使い方

SWELLでは、Font Awesome(フォントオーサム)のアイコンも使えるようになっています。

まずは「SWELL設定→Font Awesome」と進み、読み込み方を「CSS」か「Javascript」から選んで選択します。

  • CSS = CSS+Webフォントで読み込む
  • Javascript = Javascript+SVGで読み込む

基本的には、WebフォントよりSVGの方が表示が軽くて良いのではないかと考えますので、Javascript版をおすすめします。ただJavascriptが動作しないブラウザでは表示されない懸念はありますので、諸々の状況を考慮してご判断ください。

アイコンは下記のショートコードで呼び出します。

[icon class="アイコンクラス名"]

Font Awesomeのアイコン検索ページから、好きなアイコンを探して使用してください。

SWELLオリジナルアイコン一覧

ほぼ自分用メモですが、SWELLオリジナルアイコンの一覧を用意しました。

下記のとおり、独自基準でジャンル分けをして整理しています。宜しければお役立てください。

Webサービス系アイコン

ECサイト
Amazonのアイコン

[icon icon-amazon]
font-family: icomoon;
content:"\e91e";
color:#f90;

Webサービス
CodePenのアイコン

[icon icon-codepen]
font-family: icomoon;
content:“\e900”;

SNS
フェイスブックのアイコン

[icon icon-facebook]
font-family: icomoon;
content:“\e901”;

ブックマーク
feedlyのアイコン

[icon icon-feedly]
font-family: icomoon;
content:“\e902”;
color:#2bb24c;

Webサービス
githubのアイコン

[icon icon-github]
font-family: icomoon;
content:“\e903”	;

Webサービス
Google+のアイコン(※サ終)

[icon icon-googleplus]
font-family: icomoon;
content:“\e904”;
color:#dc4e41;

ブックマーク
はてなブックマークのアイコン

[icon icon-hatebu]
font-family: icomoon;
content:“\e905”;

SNS
インスタグラムのアイコン

[icon icon-instagram]
font-family: icomoon;
content:“\e906”;
color:#e4405f;

SNS
LINEのアイコン

[icon icon-line]
font-family: icomoon;
content:“\e907”;
color:#00c300;

ブログサービス
Mediumのアイコン

[icon icon-medium]
font-family: icomoon;
content:“\e908”;

SNS
ピンタレストのアイコン

[icon icon-pinterest]
font-family: icomoon;
content:“\e909”;
color:#bd081c;

ブックマーク
Pocketのアイコン

[icon icon-pocket]
font-family: icomoon;
content:“\e90a”;
color:#ef3f56;

RSS
RSSのアイコン

[icon icon-rss]
font-family: icomoon;
content:“\e90b”;
color:orange;

ブログサービス
Tumblrのアイコン

[icon icon-tumblr]
font-family: icomoon;
content:“\e90c”;

SNS
Twitterのアイコン

[icon icon-twitter]
font-family: icomoon;
content:“\e90d”;
color:#1da1f2;

ブログサービス
WordPressのアイコン

[icon icon-wordpress]
font-family: icomoon;
content:“\e90e”;

動画サービス
Youtubeのアイコン

[icon icon-youtube]
font-family: icomoon;
content:“\e90a”;
color:#ef3f56;

WPテーマ
SWELLのアイコン

[icon icon-swell]
font-family: icomoon;
content:“\e936”;

矢印・数式系アイコン

矢印
MOREアイコン

[icon icon-more_arrow]
font-family: icomoon;
content:"\e930";

矢印
ドロップダウンアイコン

[icon icon-arrow_drop_down]
font-family: icomoon;
content:"\e5c5";

矢印
ドロップアップアイコン

[icon icon-arrow_drop_up]
font-family: icomoon;
content:"\e5c7";

矢印
下矢印アイコン

[icon icon-chevron-small-down]
font-family: icomoon;
content:"\e910";

矢印
左矢印アイコン

[icon icon-chevron-small-left]
font-family: icomoon;
content:"\e911";

矢印
右矢印アイコン

[icon icon-chevron-small-right]
font-family: icomoon;
content:"\e921";

矢印
上矢印アイコン

[icon icon-chevron-small-up]
font-family: icomoon;
content:"\e912";

数式
マイナスアイコン

[icon icon-minus]
font-family: icomoon;
content:"\e919";

数式
プラスアイコン

[icon icon-plus]
font-family: icomoon;
content:"\e91c";

ファイル系アイコン

ダウンロードアイコン

[icon icon-download]
font-family: icomoon;
content:"\e914";

空のファイルアイコン

[icon icon-file-empty]
font-family: icomoon;
content:"\e924";

テキストファイルアイコン

[icon icon-file-text2]
font-family: icomoon;
content:"\e926";

写真ファイルアイコン

[icon icon-file-picture]
font-family: icomoon;
content:"\e927";

音楽ファイルアイコン

[icon icon-file-music]
font-family: icomoon;
content:"\e928";

動画ファイルアイコン

[icon icon-file-video]
font-family: icomoon;
content:"\e92a";

ZIPファイルアイコン

[icon icon-file-zip]
font-family: icomoon;
content:"\e92b";

フォルダアイコン

[icon icon-folder]
font-family: icomoon;
content:"\e92f";

インフォメーション系アイコン

アナウンスアイコン

[icon icon-megaphone]
font-family: icomoon;
content:"\e913";

TELアイコン

[icon icon-phone]
font-family: icomoon;
content:"\e942";

インフォメーションアイコン

[icon icon-info]
font-family: icomoon;
content:"\e91d";

ひらめきアイコン

[icon icon-light-bulb]
font-family: icomoon;
content:"\e915";

カートアイコン

[icon icon-cart]
font-family: icomoon;
content:"\e939";

バッドアイコン

[icon icon-thumb_down]
font-family: icomoon;
content:"\e8db";

グッドアイコン

[icon icon-thumb_up]
font-family: icomoon;
content:"\e8dc";

プロフィールアイコン

[icon icon-person]
font-family: icomoon;
content:"\e7fd";

メールアイコン

[icon icon-mail]
font-family: icomoon;
content:"\e92c";

バツアイコン

[icon icon-batsu]
font-family: icomoon;
content:"\e91f";

チェックアイコン

[icon icon-check]
font-family: icomoon;
content:"\e923";

公開時間アイコン

[icon icon-posted]
font-family: icomoon;
content:"\e931";

更新時間アイコン

[icon icon-modified]
font-family: icomoon;
content:"\e92d";

検索アイコン

[icon icon-search]
font-family: icomoon;
content:"\e92e";

クローズアイコン

[icon icon-close-thin]
font-family: icomoon;
content:"\e920";

メニューアイコン

[icon icon-menu-thin]
font-family: icomoon;
content:"\e91b";

アラートアイコン

[icon icon-alert]
font-family: icomoon;
content:"\e916";

はてなアイコン

[icon icon-hatena]
font-family: icomoon;
content:"\e917";

目次アイコン

[icon icon-index]
font-family: icomoon;
content:"\e918";

フラッグアイコン

[icon icon-flag]
font-family: icomoon;
content:"\e153";

設定アイコン

[icon icon-settings]
font-family: icomoon;
content:"\e8b8";

ロックアイコン

[icon icon-lock-closed]
font-family: icomoon;
content:"\e932";

オープンアイコン

[icon icon-lock-open]
font-family: icomoon;
content:"\e933";

ホームアイコン

[icon icon-home]
font-family: icomoon;
content:"\e922";

リンクアイコン

[icon icon-link]
font-family: icomoon;
content:"\e9c5";

引用アイコン(左)

[icon icon-quotes-left]
font-family: icomoon;
content:"\e977";

引用アイコン(右)

[icon icon-quotes-right]
font-family: icomoon;
content:"\e978";

値札アイコン

[icon icon-price-tag]
font-family: icomoon;
content:"\e935";

禁止アイコン

[icon icon-blocked]
font-family: icomoon;
content:"\ea0e";

シェアアイコン

[icon icon-share]
font-family: icomoon;
content:"\ea82";

装飾系アイコン

ペンのアイコン

[icon icon-pen]
font-family: icomoon;
content:"\e934";

本のアイコン

[icon icon-book]
font-family: icomoon;
content:"\e91a";

羽ペンのアイコン

[icon icon-quill]
font-family: icomoon;
content:"\e929";

複数の本のアイコン

[icon icon-books]
font-family: icomoon;
content:"\e925";

ふきだしアイコン

[icon icon-bubble]
font-family: icomoon;
content:"\e96b";

会話アイコン

[icon icon-bubbles]
font-family: icomoon;
content:"\e970";

クリップアイコン

[icon icon-attachment]
font-family: icomoon;
content:"\e9cd";

目のアイコン

[icon icon-eye]
font-family: icomoon;
content:"\e9ce";

ブックマークアイコン

[icon icon-bookmarks]
font-family: icomoon;
content:"\e9d3";

スターアイコン(白/空白)

[icon icon-star-empty]
font-family: icomoon;
content:"\e9d7";

ハーフスターアイコン

[icon icon-star-half]
font-family: icomoon;
content:"\e9d8";

スターアイコン(黒/フル)

[icon icon-star-full]
font-family: icomoon;
content:"\e9d9";

ハートアイコン

[icon icon-heart]
font-family: icomoon;
content:"\e9da";

SWELLアイコンまとめ

自分がよく使うのでまとめましたが、ご活用いただけると幸いです。

今回かなり一気に作業しましたので、もし間違いがあれば教えていただけると嬉しいです。お問い合わせフォームやSNSなどからご連絡いただけますと、気づいたときに修正させていただきます。

\ 当サイト最推しテーマ /

記事をシェア
  • URLをコピーしました!
  • URLをコピーしました!
時間割