Pickupニュース

スタイルシートだけでFont Awesomeのアイコンを表示する
Webフォント

スタイルシートだけでFont Awesomeのアイコンを表示する

通常アイコンWebフォント「Font Awesome」は、HTMLソース中にアイコン表示用のコードを追加する必要がありますが、スタイルシートの疑似要素:beforeを使用して特定のタグ、クラスに対してアイコンを表示することが出来ます。

Font Awesomeの仕組み

Font Awesomeのアイコンは以下のように、faクラスでFont Awesomeをフォントファミリーとして指定し、fa-{アイコン名}クラスの疑似要素:beforecontentプロパティでアイコンの種類を指定しています。
CSSCopy
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; /*Font Awesomeのフォントファミリー*/ font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-check-square-o:before { content: "\f046"; /*アイコンの種類*/ }

つまり、任意のタグやクラスに上記のスタイルシートの設定を付加することで、自由にアイコンを表示することが出来ます。

アイコンスタイルシートの設定

contentプロパティの確認

上記のcontent: “\f046”;のようなcontentプロパティの値は、チートシートで確認することが出来ます。
また、本ページ下にもFont Awesomeのcontentプロパティ早見表を添付していますのでご活用下さい。

Font Awesomeのチートシートのご利用はこちらから

Webサイト

アイコン横にグレーで表示されているフォントコードの内、下4桁のfxxxがアイコンを表示するためのcontentプロパティになります。

スタイルシートの設定

例として、WordPressテーマ「Twenty Sixteen」の記事タイトルの先頭にアイコンを表示する設定を行います。
entry-titleクラスの疑似要素:beforeに、以下のような記述を追加します。
CSSCopy
.entry-title:before{ content: '\f046'; display: inline-block; font-family: FontAwesome; font-weight: normal; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

デモ

See the Pen Non markup Font Awesome by JaSTIN (@JaSTIN) on CodePen.24295

Font Awesomeのcontentプロパティ早見表

sample
fa-500px\f26efa-adjust\f042fa-adn\f170fa-align-center\f037
fa-align-justify\f039fa-align-left\f036fa-align-right\f038fa-amazon\f270
fa-ambulance\f0f9fa-american-sign-language-interpreting\f2a3fa-anchor\f13dfa-android\f17b
fa-angellist\f209fa-angle-double-down\f103fa-angle-double-left\f100fa-angle-double-right\f101
fa-angle-double-up\f102fa-angle-down\f107fa-angle-left\f104fa-angle-right\f105
fa-angle-up\f106fa-apple\f179fa-archive\f187fa-area-chart\f1fe
fa-arrow-circle-down\f0abfa-arrow-circle-left\f0a8fa-arrow-circle-o-down\f01afa-arrow-circle-o-left\f190
fa-arrow-circle-o-right\f18efa-arrow-circle-o-up\f01bfa-arrow-circle-right\f0a9fa-arrow-circle-up\f0aa
fa-arrow-down\f063fa-arrow-left\f060fa-arrow-right\f061fa-arrow-up\f062
fa-arrows\f047fa-arrows-alt\f0b2fa-arrows-h\f07efa-arrows-v\f07d
fa-asl-interpreting\f2a3fa-assistive-listening-systems\f2a2fa-asterisk\f069fa-at\f1fa
fa-audio-description\f29efa-automobile\f1b9fa-backward\f04afa-balance-scale\f24e
fa-ban\f05efa-bank\f19cfa-bar-chart\f080fa-bar-chart-o\f080
fa-barcode\f02afa-bars\f0c9fa-battery-0\f244fa-battery-1\f243
fa-battery-2\f242fa-battery-3\f241fa-battery-4\f240fa-battery-empty\f244
fa-battery-full\f240fa-battery-half\f242fa-battery-quarter\f243fa-battery-three-quarters\f241
fa-bed\f236fa-beer\f0fcfa-behance\f1b4fa-behance-square\f1b5
fa-bell\f0f3fa-bell-o\f0a2fa-bell-slash\f1f6fa-bell-slash-o\f1f7
fa-bicycle\f206fa-binoculars\f1e5fa-birthday-cake\f1fdfa-bitbucket\f171
fa-bitbucket-square\f172fa-bitcoin\f15afa-black-tie\f27efa-blind\f29d
fa-bluetooth\f293fa-bluetooth-b\f294fa-bold\f032fa-bolt\f0e7
fa-bomb\f1e2fa-book\f02dfa-bookmark\f02efa-bookmark-o\f097
fa-braille\f2a1fa-briefcase\f0b1fa-btc\f15afa-bug\f188
fa-building\f1adfa-building-o\f0f7fa-bullhorn\f0a1fa-bullseye\f140
fa-bus\f207fa-buysellads\f20dfa-cab\f1bafa-calculator\f1ec
fa-calendar\f073fa-calendar-check-o\f274fa-calendar-minus-o\f272fa-calendar-o\f133
fa-calendar-plus-o\f271fa-calendar-times-o\f273fa-camera\f030fa-camera-retro\f083
fa-car\f1b9fa-caret-down\f0d7fa-caret-left\f0d9fa-caret-right\f0da
fa-caret-square-o-down\f150fa-caret-square-o-left\f191fa-caret-square-o-right\f152fa-caret-square-o-up\f151
fa-caret-up\f0d8fa-cart-arrow-down\f218fa-cart-plus\f217fa-cc\f20a
fa-cc-amex\f1f3fa-cc-diners-club\f24cfa-cc-discover\f1f2fa-cc-jcb\f24b
fa-cc-mastercard\f1f1fa-cc-paypal\f1f4fa-cc-stripe\f1f5fa-cc-visa\f1f0
fa-certificate\f0a3fa-chain\f0c1fa-chain-broken\f127fa-check\f00c
fa-check-circle\f058fa-check-circle-o\f05dfa-check-square\f14afa-check-square-o\f046
fa-chevron-circle-down\f13afa-chevron-circle-left\f137fa-chevron-circle-right\f138fa-chevron-circle-up\f139
fa-chevron-down\f078fa-chevron-left\f053fa-chevron-right\f054fa-chevron-up\f077
fa-child\f1aefa-chrome\f268fa-circle\f111fa-circle-o\f10c
fa-circle-o-notch\f1cefa-circle-thin\f1dbfa-clipboard\f0eafa-clock-o\f017
fa-clone\f24dfa-close\f00dfa-cloud\f0c2fa-cloud-download\f0ed
fa-cloud-upload\f0eefa-cny\f157fa-code\f121fa-code-fork\f126
fa-codepen\f1cbfa-codiepie\f284fa-coffee\f0f4fa-cog\f013
fa-cogs\f085fa-columns\f0dbfa-comment\f075fa-comment-o\f0e5
fa-commenting\f27afa-commenting-o\f27bfa-comments\f086fa-comments-o\f0e6
fa-compass\f14efa-compress\f066fa-connectdevelop\f20efa-contao\f26d
fa-copy\f0c5fa-copyright\f1f9fa-creative-commons\f25efa-credit-card\f09d
fa-credit-card-alt\f283fa-crop\f125fa-crosshairs\f05bfa-css3\f13c
fa-cube\f1b2fa-cubes\f1b3fa-cut\f0c4fa-cutlery\f0f5
fa-dashboard\f0e4fa-dashcube\f210fa-database\f1c0fa-deaf\f2a4
fa-deafness\f2a4fa-dedent\f03bfa-delicious\f1a5fa-desktop\f108
fa-deviantart\f1bdfa-diamond\f219fa-digg\f1a6fa-dollar\f155
fa-dot-circle-o\f192fa-download\f019fa-dribbble\f17dfa-dropbox\f16b
fa-drupal\f1a9fa-edge\f282fa-edit\f044fa-eject\f052
fa-ellipsis-h\f141fa-ellipsis-v\f142fa-empire\f1d1fa-envelope\f0e0
fa-envelope-o\f003fa-envelope-square\f199fa-envira\f299fa-eraser\f12d
fa-eur\f153fa-euro\f153fa-exchange\f0ecfa-exclamation\f12a
fa-exclamation-circle\f06afa-exclamation-triangle\f071fa-expand\f065fa-expeditedssl\f23e
fa-external-link\f08efa-external-link-square\f14cfa-eye\f06efa-eye-slash\f070
fa-eyedropper\f1fbfa-fa\f2b4fa-facebook\f09afa-facebook-f\f09a
fa-facebook-official\f230fa-facebook-square\f082fa-fast-backward\f049fa-fast-forward\f050
fa-fax\f1acfa-feed\f09efa-female\f182fa-fighter-jet\f0fb
fa-file\f15bfa-file-archive-o\f1c6fa-file-audio-o\f1c7fa-file-code-o\f1c9
fa-file-excel-o\f1c3fa-file-image-o\f1c5fa-file-movie-o\f1c8fa-file-o\f016
fa-file-pdf-o\f1c1fa-file-photo-o\f1c5fa-file-picture-o\f1c5fa-file-powerpoint-o\f1c4
fa-file-sound-o\f1c7fa-file-text\f15cfa-file-text-o\f0f6fa-file-video-o\f1c8
fa-file-word-o\f1c2fa-file-zip-o\f1c6fa-files-o\f0c5fa-film\f008
fa-filter\f0b0fa-fire\f06dfa-fire-extinguisher\f134fa-firefox\f269
fa-first-order\f2b0fa-flag\f024fa-flag-checkered\f11efa-flag-o\f11d
fa-flash\f0e7fa-flask\f0c3fa-flickr\f16efa-floppy-o\f0c7
fa-folder\f07bfa-folder-o\f114fa-folder-open\f07cfa-folder-open-o\f115
fa-font\f031fa-font-awesome\f2b4fa-fonticons\f280fa-fort-awesome\f286
fa-forumbee\f211fa-forward\f04efa-foursquare\f180fa-frown-o\f119
fa-futbol-o\f1e3fa-gamepad\f11bfa-gavel\f0e3fa-gbp\f154
fa-ge\f1d1fa-gear\f013fa-gears\f085fa-genderless\f22d
fa-get-pocket\f265fa-gg\f260fa-gg-circle\f261fa-gift\f06b
fa-git\f1d3fa-git-square\f1d2fa-github\f09bfa-github-alt\f113
fa-github-square\f092fa-gitlab\f296fa-gittip\f184fa-glass\f000
fa-glide\f2a5fa-glide-g\f2a6fa-globe\f0acfa-google\f1a0
fa-google-plus\f0d5fa-google-plus-circle[]\f2b3fa-google-plus-official\f2b3fa-google-plus-square\f0d4
fa-google-wallet\f1eefa-graduation-cap\f19dfa-gratipay\f184fa-group\f0c0
fa-h-square\f0fdfa-hacker-news\f1d4fa-hand-grab-o\f255fa-hand-lizard-o\f258
fa-hand-o-down\f0a7fa-hand-o-left\f0a5fa-hand-o-right\f0a4fa-hand-o-up\f0a6
fa-hand-paper-o\f256fa-hand-peace-o\f25bfa-hand-pointer-o\f25afa-hand-rock-o\f255
fa-hand-scissors-o\f257fa-hand-spock-o\f259fa-hand-stop-o\f256fa-hard-of-hearing\f2a4
fa-hashtag\f292fa-hdd-o\f0a0fa-header\f1dcfa-headphones\f025
fa-heart\f004fa-heart-o\f08afa-heartbeat\f21efa-history\f1da
fa-home\f015fa-hospital-o\f0f8fa-hotel\f236fa-hourglass\f254
fa-hourglass-1\f251fa-hourglass-2\f252fa-hourglass-3\f253fa-hourglass-end\f253
fa-hourglass-half\f252fa-hourglass-o\f250fa-hourglass-start\f251fa-houzz\f27c
fa-html5\f13bfa-i-cursor\f246fa-ils\f20bfa-image\f03e
fa-inbox\f01cfa-indent\f03cfa-industry\f275fa-info\f129
fa-info-circle\f05afa-inr\f156fa-instagram\f16dfa-institution\f19c
fa-internet-explorer\f26bfa-intersex\f224fa-ioxhost\f208fa-italic\f033
fa-joomla\f1aafa-jpy\f157fa-jsfiddle\f1ccfa-key\f084
fa-keyboard-o\f11cfa-krw\f159fa-language\f1abfa-laptop\f109
fa-lastfm\f202fa-lastfm-square\f203fa-leaf\f06cfa-leanpub\f212
fa-legal\f0e3fa-lemon-o\f094fa-level-down\f149fa-level-up\f148
fa-life-bouy\f1cdfa-life-buoy\f1cdfa-life-ring\f1cdfa-life-saver\f1cd
fa-lightbulb-o\f0ebfa-line-chart\f201fa-link\f0c1fa-linkedin\f0e1
fa-linkedin-square\f08cfa-linux\f17cfa-list\f03afa-list-alt\f022
fa-list-ol\f0cbfa-list-ul\f0cafa-location-arrow\f124fa-lock\f023
fa-long-arrow-down\f175fa-long-arrow-left\f177fa-long-arrow-right\f178fa-long-arrow-up\f176
fa-low-vision\f2a8fa-magic\f0d0fa-magnet\f076fa-mail-forward\f064
fa-mail-reply\f112fa-mail-reply-all\f122fa-male\f183fa-map\f279
fa-map-marker\f041fa-map-o\f278fa-map-pin\f276fa-map-signs\f277
fa-mars\f222fa-mars-double\f227fa-mars-stroke\f229fa-mars-stroke-h\f22b
fa-mars-stroke-v\f22afa-maxcdn\f136fa-meanpath\f20cfa-medium\f23a
fa-medkit\f0fafa-meh-o\f11afa-mercury\f223fa-microphone\f130
fa-microphone-slash\f131fa-minus\f068fa-minus-circle\f056fa-minus-square\f146
fa-minus-square-o\f147fa-mixcloud\f289fa-mobile\f10bfa-mobile-phone\f10b
fa-modx\f285fa-money\f0d6fa-moon-o\f186fa-mortar-board\f19d
fa-motorcycle\f21cfa-mouse-pointer\f245fa-music\f001fa-navicon\f0c9
fa-neuter\f22cfa-newspaper-o\f1eafa-object-group\f247fa-object-ungroup\f248
fa-odnoklassniki\f263fa-odnoklassniki-square\f264fa-opencart\f23dfa-openid\f19b
fa-opera\f26afa-optin-monster\f23cfa-outdent\f03bfa-pagelines\f18c
fa-paint-brush\f1fcfa-paper-plane\f1d8fa-paper-plane-o\f1d9fa-paperclip\f0c6
fa-paragraph\f1ddfa-paste\f0eafa-pause\f04cfa-pause-circle\f28b
fa-pause-circle-o\f28cfa-paw\f1b0fa-paypal\f1edfa-pencil\f040
fa-pencil-square\f14bfa-pencil-square-o\f044fa-percent\f295fa-phone\f095
fa-phone-square\f098fa-photo\f03efa-picture-o\f03efa-pie-chart\f200
fa-pied-piper\f2aefa-pied-piper-alt\f1a8fa-pied-piper-pp\f1a7fa-pinterest\f0d2
fa-pinterest-p\f231fa-pinterest-square\f0d3fa-plane\f072fa-play\f04b
fa-play-circle\f144fa-play-circle-o\f01dfa-plug\f1e6fa-plus\f067
fa-plus-circle\f055fa-plus-square\f0fefa-plus-square-o\f196fa-power-off\f011
fa-print\f02ffa-product-hunt\f288fa-puzzle-piece\f12efa-qq\f1d6
fa-qrcode\f029fa-question\f128fa-question-circle\f059fa-question-circle-o\f29c
fa-quote-left\f10dfa-quote-right\f10efa-ra\f1d0fa-random\f074
fa-rebel\f1d0fa-recycle\f1b8fa-reddit\f1a1fa-reddit-alien\f281
fa-reddit-square\f1a2fa-refresh\f021fa-registered\f25dfa-remove\f00d
fa-renren\f18bfa-reorder\f0c9fa-repeat\f01efa-reply\f112
fa-reply-all\f122fa-resistance\f1d0fa-retweet\f079fa-rmb\f157
fa-road\f018fa-rocket\f135fa-rotate-left\f0e2fa-rotate-right\f01e
fa-rouble\f158fa-rss\f09efa-rss-square\f143fa-rub\f158
fa-ruble\f158fa-rupee\f156fa-safari\f267fa-save\f0c7
fa-scissors\f0c4fa-scribd\f28afa-search\f002fa-search-minus\f010
fa-search-plus\f00efa-sellsy\f213fa-send\f1d8fa-send-o\f1d9
fa-server\f233fa-share\f064fa-share-alt\f1e0fa-share-alt-square\f1e1
fa-share-square\f14dfa-share-square-o\f045fa-shekel\f20bfa-sheqel\f20b
fa-shield\f132fa-ship\f21afa-shirtsinbulk\f214fa-shopping-bag\f290
fa-shopping-basket\f291fa-shopping-cart\f07afa-sign-in\f090fa-sign-language\f2a7
fa-sign-out\f08bfa-signal\f012fa-signing\f2a7fa-simplybuilt\f215
fa-sitemap\f0e8fa-skyatlas\f216fa-skype\f17efa-slack\f198
fa-sliders\f1defa-slideshare\f1e7fa-smile-o\f118fa-snapchat\f2ab
fa-snapchat-ghost\f2acfa-snapchat-square\f2adfa-soccer-ball-o\f1e3fa-sort\f0dc
fa-sort-alpha-asc\f15dfa-sort-alpha-desc\f15efa-sort-amount-asc\f160fa-sort-amount-desc\f161
fa-sort-asc\f0defa-sort-desc\f0ddfa-sort-down\f0ddfa-sort-numeric-asc\f162
fa-sort-numeric-desc\f163fa-sort-up\f0defa-soundcloud\f1befa-space-shuttle\f197
fa-spinner\f110fa-spoon\f1b1fa-spotify\f1bcfa-square\f0c8
fa-square-o\f096fa-stack-exchange\f18dfa-stack-overflow\f16cfa-star\f005
fa-star-half\f089fa-star-half-empty\f123fa-star-half-full\f123fa-star-half-o\f123
fa-star-o\f006fa-steam\f1b6fa-steam-square\f1b7fa-step-backward\f048
fa-step-forward\f051fa-stethoscope\f0f1fa-sticky-note\f249fa-sticky-note-o\f24a
fa-stop\f04dfa-stop-circle\f28dfa-stop-circle-o\f28efa-street-view\f21d
fa-strikethrough\f0ccfa-stumbleupon\f1a4fa-stumbleupon-circle\f1a3fa-subscript\f12c
fa-subway\f239fa-suitcase\f0f2fa-sun-o\f185fa-superscript\f12b
fa-support\f1cdfa-table\f0cefa-tablet\f10afa-tachometer\f0e4
fa-tag\f02bfa-tags\f02cfa-tasks\f0aefa-taxi\f1ba
fa-television\f26cfa-tencent-weibo\f1d5fa-terminal\f120fa-text-height\f034
fa-text-width\f035fa-th\f00afa-th-large\f009fa-th-list\f00b
fa-themeisle\f2b2fa-thumb-tack\f08dfa-thumbs-down\f165fa-thumbs-o-down\f088
fa-thumbs-o-up\f087fa-thumbs-up\f164fa-ticket\f145fa-times\f00d
fa-times-circle\f057fa-times-circle-o\f05cfa-tint\f043fa-toggle-down\f150
fa-toggle-left\f191fa-toggle-off\f204fa-toggle-on\f205fa-toggle-right\f152
fa-toggle-up\f151fa-trademark\f25cfa-train\f238fa-transgender\f224
fa-transgender-alt\f225fa-trash\f1f8fa-trash-o\f014fa-tree\f1bb
fa-trello\f181fa-tripadvisor\f262fa-trophy\f091fa-truck\f0d1
fa-try\f195fa-tty\f1e4fa-tumblr\f173fa-tumblr-square\f174
fa-turkish-lira\f195fa-tv\f26cfa-twitch\f1e8fa-twitter\f099
fa-twitter-square\f081fa-umbrella\f0e9fa-underline\f0cdfa-undo\f0e2
fa-universal-access\f29afa-university\f19cfa-unlink\f127fa-unlock\f09c
fa-unlock-alt\f13efa-unsorted\f0dcfa-upload\f093fa-usb\f287
fa-usd\f155fa-user\f007fa-user-md\f0f0fa-user-plus\f234
fa-user-secret\f21bfa-user-times\f235fa-users\f0c0fa-venus\f221
fa-venus-double\f226fa-venus-mars\f228fa-viacoin\f237fa-viadeo\f2a9
fa-viadeo-square\f2aafa-video-camera\f03dfa-vimeo\f27dfa-vimeo-square\f194
fa-vine\f1cafa-vk\f189fa-volume-control-phone\f2a0fa-volume-down\f027
fa-volume-off\f026fa-volume-up\f028fa-warning\f071fa-wechat\f1d7
fa-weibo\f18afa-weixin\f1d7fa-whatsapp\f232fa-wheelchair\f193
fa-wheelchair-alt\f29bfa-wifi\f1ebfa-wikipedia-w\f266fa-windows\f17a
fa-won\f159fa-wordpress\f19afa-wpbeginner\f297fa-wpforms\f298
fa-wrench\f0adfa-xing\f168fa-xing-square\f169fa-y-combinator\f23b
fa-y-combinator-square\f1d4fa-yahoo\f19efa-yc\f23bfa-yc-square\f1d4
fa-yelp\f1e9fa-yen\f157fa-yoast\f2b1fa-youtube\f167
fa-youtube-play\f16afa-youtube-square\f166

2 件のコメント

  • […] 参考WordPressのアクションフックの種類と実行順WordPressで問い合わせフォームを設置する方法【初心者向け】WordPress:WordPressで固定ページの表示順を変更するQRのススメWordPressでソーシャルボタンを追加する方法【初心者向け】Twitter Appshttps://blog.codecamp.jp/wordpress_plugin_for_accessストリング翻訳が表示されない理由は何ですか?WordPress と Facebook を効果的に連携させるための4つの方法【プログラミング不要】WordPressとFacebookを連携して自動投稿する方法【ifttt】WordPressとFaceBook、Twitter連携プログラムが便利すぎる件WordPressとGoogle+を連携するためにやっておくべき3つのコトWordPressの新着記事をFacebookに自動投稿する方法WordPressの設定で最初にやることWordPress の Ktai Style を PHP 7 で動作するように修正したWebサイトデザインの横幅サイズ!もう何pxか迷わない! 2017年1月版レスポンシブWebデザインサイトを作る時に必要なデバイスのモニターサイズをまとめましたブログにTwitterやFacebook、はてブ等SNSのシェアボタンを設置する方法と手順LINEで送るボタン設置方法|WordPressやMovabletypeなど各ブログにもフッターのカスタマイズ。1つのウィジェットエリアに複数のウィジェットを格納して横並びする方法iOS で click イベントがわけのわからない動作をする件についてスタイルシートだけでFont Awesomeのアイコンを表示する […]

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください