電話やメールなどのアイコンを使いたい場合は、画像を埋め込むよりFont AwesomeといったWebフォントを使えば、後から修正が発生した場合でも、大きさや色、アイコンの種類を簡単に変更できるので便利です。
使い方は簡単です。下記のコードをHEAD内に記載しておき、あとは表示させたい部分に特定のコードを書くだけです。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">例えばツイッターのアイコンを表示させたい場合は、
<i class="fa fa-twitter"></i>と＜i＞タグの中のclassに「fa fa-twitter」と指定したコードを記載することで
のように記載されます。アイコンのコードを調べる場合は、FontAwesomeから確認できますが、下記にコードとアイコンの対応表を作ってみましたので、ご参考ください。
fa-500px | fa-adjust | fa-adn | fa-align-center |
fa-align-justify | fa-align-left | fa-align-right | fa-amazon |
fa-ambulance | fa-american-sign-language-interpreting | fa-anchor | fa-android |
fa-angellist | fa-angle-double-down | fa-angle-double-left | fa-angle-double-right |
fa-angle-double-up | fa-angle-down | fa-angle-left | fa-angle-right |
fa-angle-up | fa-apple | fa-archive | fa-area-chart |
fa-arrow-circle-down | fa-arrow-circle-left | fa-arrow-circle-o-down | fa-arrow-circle-o-left |
fa-arrow-circle-o-right | fa-arrow-circle-o-up | fa-arrow-circle-right | fa-arrow-circle-up |
fa-arrow-down | fa-arrow-left | fa-arrow-right | fa-arrow-up |
fa-arrows | fa-arrows-alt | fa-arrows-h | fa-arrows-v |
fa-asl-interpreting | fa-assistive-listening-systems | fa-asterisk | fa-at |
fa-audio-description | fa-automobile | fa-backward | fa-balance-scale |
fa-ban | fa-bank | fa-bar-chart | fa-bar-chart-o |
fa-barcode | fa-bars | fa-battery-0 | fa-battery-1 |
fa-battery-2 | fa-battery-3 | fa-battery-4 | fa-battery-empty |
fa-battery-full | fa-battery-half | fa-battery-quarter | fa-battery-three-quarters |
fa-bed | fa-beer | fa-behance | fa-behance-square |
fa-bell | fa-bell-o | fa-bell-slash | fa-bell-slash-o |
fa-bicycle | fa-binoculars | fa-birthday-cake | fa-bitbucket |
fa-bitbucket-square | fa-bitcoin | fa-black-tie | fa-blind |
fa-bluetooth | fa-bluetooth-b | fa-bold | fa-bolt |
fa-bomb | fa-book | fa-bookmark | fa-bookmark-o |
fa-braille | fa-briefcase | fa-btc | fa-bug |
fa-building | fa-building-o | fa-bullhorn | fa-bullseye |
fa-bus | fa-buysellads | fa-cab | fa-calculator |
fa-calendar | fa-calendar-check-o | fa-calendar-minus-o | fa-calendar-o |
fa-calendar-plus-o | fa-calendar-times-o | fa-camera | fa-camera-retro |
fa-car | fa-caret-down | fa-caret-left | fa-caret-right |
fa-caret-square-o-down | fa-caret-square-o-left | fa-caret-square-o-right | fa-caret-square-o-up |
fa-caret-up | fa-cart-arrow-down | fa-cart-plus | fa-cc |
fa-cc-amex | fa-cc-diners-club | fa-cc-discover | fa-cc-jcb |
fa-cc-mastercard | fa-cc-paypal | fa-cc-stripe | fa-cc-visa |
fa-certificate | fa-chain | fa-chain-broken | fa-check |
fa-check-circle | fa-check-circle-o | fa-check-square | fa-check-square-o |
fa-chevron-circle-down | fa-chevron-circle-left | fa-chevron-circle-right | fa-chevron-circle-up |
fa-chevron-down | fa-chevron-left | fa-chevron-right | fa-chevron-up |
fa-child | fa-chrome | fa-circle | fa-circle-o |
fa-circle-o-notch | fa-circle-thin | fa-clipboard | fa-clock-o |
fa-clone | fa-close | fa-cloud | fa-cloud-download |
fa-cloud-upload | fa-cny | fa-code | fa-code-fork |
fa-codepen | fa-codiepie | fa-coffee | fa-cog |
fa-cogs | fa-columns | fa-comment | fa-comment-o |
fa-commenting | fa-commenting-o | fa-comments | fa-comments-o |
fa-compass | fa-compress | fa-connectdevelop | fa-contao |
fa-copy | fa-copyright | fa-creative-commons | fa-credit-card |
fa-credit-card-alt | fa-crop | fa-crosshairs | fa-css3 |
fa-cube | fa-cubes | fa-cut | fa-cutlery |
fa-dashboard | fa-dashcube | fa-database | fa-deaf |
fa-deafness | fa-dedent | fa-delicious | fa-desktop |
fa-deviantart | fa-diamond | fa-digg | fa-dollar |
fa-dot-circle-o | fa-download | fa-dribbble | fa-dropbox |
fa-drupal | fa-edge | fa-edit | fa-eject |
fa-ellipsis-h | fa-ellipsis-v | fa-empire | fa-envelope |
fa-envelope-o | fa-envelope-square | fa-envira | fa-eraser |
fa-eur | fa-euro | fa-exchange | fa-exclamation |
fa-exclamation-circle | fa-exclamation-triangle | fa-expand | fa-expeditedssl |
fa-external-link | fa-external-link-square | fa-eye | fa-eye-slash |
fa-eyedropper | fa-fa | fa-facebook | fa-facebook-f |
fa-facebook-official | fa-facebook-square | fa-fast-backward | fa-fast-forward |
fa-fax | fa-feed | fa-female | fa-fighter-jet |
fa-file | fa-file-archive-o | fa-file-audio-o | fa-file-code-o |
fa-file-excel-o | fa-file-image-o | fa-file-movie-o | fa-file-o |
fa-file-pdf-o | fa-file-photo-o | fa-file-picture-o | fa-file-powerpoint-o |
fa-file-sound-o | fa-file-text | fa-file-text-o | fa-file-video-o |
fa-file-word-o | fa-file-zip-o | fa-files-o | fa-film |
fa-filter | fa-fire | fa-fire-extinguisher | fa-firefox |
fa-first-order | fa-flag | fa-flag-checkered | fa-flag-o |
fa-flash | fa-flask | fa-flickr | fa-floppy-o |
fa-folder | fa-folder-o | fa-folder-open | fa-folder-open-o |
fa-font | fa-font-awesome | fa-fonticons | fa-fort-awesome |
fa-forumbee | fa-forward | fa-foursquare | fa-frown-o |
fa-futbol-o | fa-gamepad | fa-gavel | fa-gbp |
fa-ge | fa-gear | fa-gears | fa-genderless |
fa-get-pocket | fa-gg | fa-gg-circle | fa-gift |
fa-git | fa-git-square | fa-github | fa-github-alt |
fa-github-square | fa-gitlab | fa-gittip | fa-glass |
fa-glide | fa-glide-g | fa-globe | fa-google |
fa-google-plus | fa-google-plus-circle | fa-google-plus-official | fa-google-plus-square |
fa-google-wallet | fa-graduation-cap | fa-gratipay | fa-group |
fa-h-square | fa-hacker-news | fa-hand-grab-o | fa-hand-lizard-o |
fa-hand-o-down | fa-hand-o-left | fa-hand-o-right | fa-hand-o-up |
fa-hand-paper-o | fa-hand-peace-o | fa-hand-pointer-o | fa-hand-rock-o |
fa-hand-scissors-o | fa-hand-spock-o | fa-hand-stop-o | fa-hard-of-hearing |
fa-hashtag | fa-hdd-o | fa-header | fa-headphones |
fa-heart | fa-heart-o | fa-heartbeat | fa-history |
fa-home | fa-hospital-o | fa-hotel | fa-hourglass |
fa-hourglass-1 | fa-hourglass-2 | fa-hourglass-3 | fa-hourglass-end |
fa-hourglass-half | fa-hourglass-o | fa-hourglass-start | fa-houzz |
fa-html5 | fa-i-cursor | fa-ils | fa-image |
fa-inbox | fa-indent | fa-industry | fa-info |
fa-info-circle | fa-inr | fa-instagram | fa-institution |
fa-internet-explorer | fa-intersex | fa-ioxhost | fa-italic |
fa-joomla | fa-jpy | fa-jsfiddle | fa-key |
fa-keyboard-o | fa-krw | fa-language | fa-laptop |
fa-lastfm | fa-lastfm-square | fa-leaf | fa-leanpub |
fa-legal | fa-lemon-o | fa-level-down | fa-level-up |
fa-life-bouy | fa-life-buoy | fa-life-ring | fa-life-saver |
fa-lightbulb-o | fa-line-chart | fa-link | fa-linkedin |
fa-linkedin-square | fa-linux | fa-list | fa-list-alt |
fa-list-ol | fa-list-ul | fa-location-arrow | fa-lock |
fa-long-arrow-down | fa-long-arrow-left | fa-long-arrow-right | fa-long-arrow-up |
fa-low-vision | fa-magic | fa-magnet | fa-mail-forward |
fa-mail-reply | fa-mail-reply-all | fa-male | fa-map |
fa-map-marker | fa-map-o | fa-map-pin | fa-map-signs |
fa-mars | fa-mars-double | fa-mars-stroke | fa-mars-stroke-h |
fa-mars-stroke-v | fa-maxcdn | fa-meanpath | fa-medium |
fa-medkit | fa-meh-o | fa-mercury | fa-microphone |
fa-microphone-slash | fa-minus | fa-minus-circle | fa-minus-square |
fa-minus-square-o | fa-mixcloud | fa-mobile | fa-mobile-phone |
fa-modx | fa-money | fa-moon-o | fa-mortar-board |
fa-motorcycle | fa-mouse-pointer | fa-music | fa-navicon |
fa-neuter | fa-newspaper-o | fa-object-group | fa-object-ungroup |
fa-odnoklassniki | fa-odnoklassniki-square | fa-opencart | fa-openid |
fa-opera | fa-optin-monster | fa-outdent | fa-pagelines |
fa-paint-brush | fa-paper-plane | fa-paper-plane-o | fa-paperclip |
fa-paragraph | fa-paste | fa-pause | fa-pause-circle |
fa-pause-circle-o | fa-paw | fa-paypal | fa-pencil |
fa-pencil-square | fa-pencil-square-o | fa-percent | fa-phone |
fa-phone-square | fa-photo | fa-picture-o | fa-pie-chart |
fa-pied-piper | fa-pied-piper-alt | fa-pied-piper-pp | fa-pinterest |
fa-pinterest-p | fa-pinterest-square | fa-plane | fa-play |
fa-play-circle | fa-play-circle-o | fa-plug | fa-plus |
fa-plus-circle | fa-plus-square | fa-plus-square-o | fa-power-off |
fa-print | fa-product-hunt | fa-puzzle-piece | fa-qq |
fa-qrcode | fa-question | fa-question-circle | fa-question-circle-o |
fa-quote-left | fa-quote-right | fa-ra | fa-random |
fa-rebel | fa-recycle | fa-reddit | fa-reddit-alien |
fa-reddit-square | fa-refresh | fa-registered | fa-remove |
fa-renren | fa-reorder | fa-repeat | fa-reply |
fa-reply-all | fa-resistance | fa-retweet | fa-rmb |
fa-road | fa-rocket | fa-rotate-left | fa-rotate-right |
fa-rouble | fa-rss | fa-rss-square | fa-rub |
fa-ruble | fa-rupee | fa-safari | fa-save |
fa-scissors | fa-scribd | fa-search | fa-search-minus |
fa-search-plus | fa-sellsy | fa-send | fa-send-o |
fa-server | fa-share | fa-share-alt | fa-share-alt-square |
fa-share-square | fa-share-square-o | fa-shekel | fa-sheqel |
fa-shield | fa-ship | fa-shirtsinbulk | fa-shopping-bag |
fa-shopping-basket | fa-shopping-cart | fa-sign-in | fa-sign-language |
fa-sign-out | fa-signal | fa-signing | fa-simplybuilt |
fa-sitemap | fa-skyatlas | fa-skype | fa-slack |
fa-sliders | fa-slideshare | fa-smile-o | fa-snapchat |
fa-snapchat-ghost | fa-snapchat-square | fa-soccer-ball-o | fa-sort |
fa-sort-alpha-asc | fa-sort-alpha-desc | fa-sort-amount-asc | fa-sort-amount-desc |
fa-sort-asc | fa-sort-desc | fa-sort-down | fa-sort-numeric-asc |
fa-sort-numeric-desc | fa-sort-up | fa-soundcloud | fa-space-shuttle |
fa-spinner | fa-spoon | fa-spotify | fa-square |
fa-square-o | fa-stack-exchange | fa-stack-overflow | fa-star |
fa-star-half | fa-star-half-empty | fa-star-half-full | fa-star-half-o |
fa-star-o | fa-steam | fa-steam-square | fa-step-backward |
fa-step-forward | fa-stethoscope | fa-sticky-note | fa-sticky-note-o |
fa-stop | fa-stop-circle | fa-stop-circle-o | fa-street-view |
fa-strikethrough | fa-stumbleupon | fa-stumbleupon-circle | fa-subscript |
fa-subway | fa-suitcase | fa-sun-o | fa-superscript |
fa-support | fa-table | fa-tablet | fa-tachometer |
fa-tag | fa-tags | fa-tasks | fa-taxi |
fa-television | fa-tencent-weibo | fa-terminal | fa-text-height |
fa-text-width | fa-th | fa-th-large | fa-th-list |
fa-themeisle | fa-thumb-tack | fa-thumbs-down | fa-thumbs-o-down |
fa-thumbs-o-up | fa-thumbs-up | fa-ticket | fa-times |
fa-times-circle | fa-times-circle-o | fa-tint | fa-toggle-down |
fa-toggle-left | fa-toggle-off | fa-toggle-on | fa-toggle-right |
fa-toggle-up | fa-trademark | fa-train | fa-transgender |
fa-transgender-alt | fa-trash | fa-trash-o | fa-tree |
fa-trello | fa-tripadvisor | fa-trophy | fa-truck |
fa-try | fa-tty | fa-tumblr | fa-tumblr-square |
fa-turkish-lira | fa-tv | fa-twitch | fa-twitter |
fa-twitter-square | fa-umbrella | fa-underline | fa-undo |
fa-universal-access | fa-university | fa-unlink | fa-unlock |
fa-unlock-alt | fa-unsorted | fa-upload | fa-usb |
fa-usd | fa-user | fa-user-md | fa-user-plus |
fa-user-secret | fa-user-times | fa-users | fa-venus |
fa-venus-double | fa-venus-mars | fa-viacoin | fa-viadeo |
fa-viadeo-square | fa-video-camera | fa-vimeo | fa-vimeo-square |
fa-vine | fa-vk | fa-volume-control-phone | fa-volume-down |
fa-volume-off | fa-volume-up | fa-warning | fa-wechat |
fa-weibo | fa-weixin | fa-whatsapp | fa-wheelchair |
fa-wheelchair-alt | fa-wifi | fa-wikipedia-w | fa-windows |
fa-won | fa-wordpress | fa-wpbeginner | fa-wpforms |
fa-wrench | fa-xing | fa-xing-square | fa-y-combinator |
fa-y-combinator-square | fa-yahoo | fa-yc | fa-yc-square |
fa-yelp | fa-yen | fa-yoast | fa-youtube |
fa-youtube-play | fa-youtube-square |