【HTML】Font Awesome 5 をWEBサイトに組み込む方法

Font AwesomeはWEBサイトにも組み込むことができるアイコンフォントです。現行の最新バージョン(Version 5.8.1)では、無料版で1,513種類、有料版で5,097種類ものアイコンが利用することができます。アイコンは矢印やインターフェースで利用でいる記号、SNSなどのロゴなど豊富にそろっており、パソコンにインストールして利用すること、またWEBサイトに組み込み利用することが可能です。WEBサイトでWEBフォントとして組み込むことで、アイコン用の画像を準備することなく、表示することができます。文字フォントと同様にサイズ、色を変えることができ、サイズごとに画像を用意することなく、大きく表示しても小さく表示しても鮮明にキレイにアイコンを表示することが可能です。今回は、Font AwesomeをWEBサイトに導入する方法をご紹介します。

Font Awesome 公式サイト

Font Awesome 5 の導入方法

Font Awesome 5の導入は、CDNによる導入方法と、フォントデータをダウンロードして組み込む2種類の方法があります。またアイコンデータとしてWebfontを使用する方法と、SVGを使用する方法に分かれます。

Font Awesome 5 のCDNによる導入

Font Awesome’s CDN のWebfont版

Webfont版は、アイコンを使用したいページに以下のスタイルシートデータを読み込むことで実装できます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Font Awesome’s CDN のSVG版

SVG版は、アイコンを使用したいページに以下のjavascriptを読み込むことで実装できます。

<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>

Font Awesome 5 のダウンロードデータによる導入

Font Awesome 公式サイトよりデータをダウンロードすることができます。Font Awesome 5 のデータをダウンロードすると以下のファイルがセットになっています。

fontawesome-free-5.8.1-web
│  LICENSE.txt
│  list.txt
│  
├─css
│      all.css
│      all.min.css
│      brands.css
│      brands.min.css
│      fontawesome.css
│      fontawesome.min.css
│      regular.css
│      regular.min.css
│      solid.css
│      solid.min.css
│      svg-with-js.css
│      svg-with-js.min.css
│      v4-shims.css
│      v4-shims.min.css
│      
├─js
│      all.js
│      all.min.js
│      brands.js
│      brands.min.js
│      fontawesome.js
│      fontawesome.min.js
│      regular.js
│      regular.min.js
│      solid.js
│      solid.min.js
│      v4-shims.js
│      v4-shims.min.js
│      
├─less
│      brands.less
│      fontawesome.less
│      regular.less
│      solid.less
│      v4-shims.less
│      _animated.less
│      _bordered-pulled.less
│      _core.less
│      _fixed-width.less
│      _icons.less
│      _larger.less
│      _list.less
│      _mixins.less
│      _rotated-flipped.less
│      _screen-reader.less
│      _shims.less
│      _stacked.less
│      _variables.less
│      
├─metadata
│      categories.yml
│      icons.json
│      icons.yml
│      shims.json
│      shims.yml
│      sponsors.yml
│      
├─scss
│      brands.scss
│      fontawesome.scss
│      regular.scss
│      solid.scss
│      v4-shims.scss
│      _animated.scss
│      _bordered-pulled.scss
│      _core.scss
│      _fixed-width.scss
│      _icons.scss
│      _larger.scss
│      _list.scss
│      _mixins.scss
│      _rotated-flipped.scss
│      _screen-reader.scss
│      _shims.scss
│      _stacked.scss
│      _variables.scss
│      
├─sprites
│      brands.svg
│      regular.svg
│      solid.svg
│      
├─svgs
│  ├─brands
│  │      500px.svg
│  │      accessible-icon.svg
│  │      accusoft.svg
│  │      acquisitions-incorporated.svg
│  │      adn.svg
│  │      adobe.svg
│  │      adversal.svg
│  │      affiliatetheme.svg
│  │      airbnb.svg
│  │      algolia.svg
│  │      alipay.svg
│  │      amazon-pay.svg
│  │      amazon.svg
│  │      amilia.svg
│  │      android.svg
│  │      angellist.svg
│  │      angrycreative.svg
│  │      angular.svg
│  │      app-store-ios.svg
│  │      app-store.svg
│  │      apper.svg
│  │      apple-pay.svg
│  │      apple.svg
│  │      artstation.svg
│  │      asymmetrik.svg
│  │      atlassian.svg
│  │      audible.svg
│  │      autoprefixer.svg
│  │      avianex.svg
│  │      aviato.svg
│  │      aws.svg
│  │      bandcamp.svg
│  │      battle-net.svg
│  │      behance-square.svg
│  │      behance.svg
│  │      bimobject.svg
│  │      bitbucket.svg
│  │      bitcoin.svg
│  │      bity.svg
│  │      black-tie.svg
│  │      blackberry.svg
│  │      blogger-b.svg
│  │      blogger.svg
│  │      bluetooth-b.svg
│  │      bluetooth.svg
│  │      bootstrap.svg
│  │      btc.svg
│  │      buffer.svg
│  │      buromobelexperte.svg
│  │      buysellads.svg
│  │      canadian-maple-leaf.svg
│  │      cc-amazon-pay.svg
│  │      cc-amex.svg
│  │      cc-apple-pay.svg
│  │      cc-diners-club.svg
│  │      cc-discover.svg
│  │      cc-jcb.svg
│  │      cc-mastercard.svg
│  │      cc-paypal.svg
│  │      cc-stripe.svg
│  │      cc-visa.svg
│  │      centercode.svg
│  │      centos.svg
│  │      chrome.svg
│  │      chromecast.svg
│  │      cloudscale.svg
│  │      cloudsmith.svg
│  │      cloudversify.svg
│  │      codepen.svg
│  │      codiepie.svg
│  │      confluence.svg
│  │      connectdevelop.svg
│  │      contao.svg
│  │      cpanel.svg
│  │      creative-commons-by.svg
│  │      creative-commons-nc-eu.svg
│  │      creative-commons-nc-jp.svg
│  │      creative-commons-nc.svg
│  │      creative-commons-nd.svg
│  │      creative-commons-pd-alt.svg
│  │      creative-commons-pd.svg
│  │      creative-commons-remix.svg
│  │      creative-commons-sa.svg
│  │      creative-commons-sampling-plus.svg
│  │      creative-commons-sampling.svg
│  │      creative-commons-share.svg
│  │      creative-commons-zero.svg
│  │      creative-commons.svg
│  │      critical-role.svg
│  │      css3-alt.svg
│  │      css3.svg
│  │      cuttlefish.svg
│  │      d-and-d-beyond.svg
│  │      d-and-d.svg
│  │      dashcube.svg
│  │      delicious.svg
│  │      deploydog.svg
│  │      deskpro.svg
│  │      dev.svg
│  │      deviantart.svg
│  │      dhl.svg
│  │      diaspora.svg
│  │      digg.svg
│  │      digital-ocean.svg
│  │      discord.svg
│  │      discourse.svg
│  │      dochub.svg
│  │      docker.svg
│  │      draft2digital.svg
│  │      dribbble-square.svg
│  │      dribbble.svg
│  │      dropbox.svg
│  │      drupal.svg
│  │      dyalog.svg
│  │      earlybirds.svg
│  │      ebay.svg
│  │      edge.svg
│  │      elementor.svg
│  │      ello.svg
│  │      ember.svg
│  │      empire.svg
│  │      envira.svg
│  │      erlang.svg
│  │      ethereum.svg
│  │      etsy.svg
│  │      evernote.svg
│  │      expeditedssl.svg
│  │      facebook-f.svg
│  │      facebook-messenger.svg
│  │      facebook-square.svg
│  │      facebook.svg
│  │      fantasy-flight-games.svg
│  │      fedex.svg
│  │      fedora.svg
│  │      figma.svg
│  │      firefox.svg
│  │      first-order-alt.svg
│  │      first-order.svg
│  │      firstdraft.svg
│  │      flickr.svg
│  │      flipboard.svg
│  │      fly.svg
│  │      font-awesome-alt.svg
│  │      font-awesome-flag.svg
│  │      font-awesome-logo-full.svg
│  │      font-awesome.svg
│  │      fonticons-fi.svg
│  │      fonticons.svg
│  │      fort-awesome-alt.svg
│  │      fort-awesome.svg
│  │      forumbee.svg
│  │      foursquare.svg
│  │      free-code-camp.svg
│  │      freebsd.svg
│  │      fulcrum.svg
│  │      galactic-republic.svg
│  │      galactic-senate.svg
│  │      get-pocket.svg
│  │      gg-circle.svg
│  │      gg.svg
│  │      git-square.svg
│  │      git.svg
│  │      github-alt.svg
│  │      github-square.svg
│  │      github.svg
│  │      gitkraken.svg
│  │      gitlab.svg
│  │      gitter.svg
│  │      glide-g.svg
│  │      glide.svg
│  │      gofore.svg
│  │      goodreads-g.svg
│  │      goodreads.svg
│  │      google-drive.svg
│  │      google-play.svg
│  │      google-plus-g.svg
│  │      google-plus-square.svg
│  │      google-plus.svg
│  │      google-wallet.svg
│  │      google.svg
│  │      gratipay.svg
│  │      grav.svg
│  │      gripfire.svg
│  │      grunt.svg
│  │      gulp.svg
│  │      hacker-news-square.svg
│  │      hacker-news.svg
│  │      hackerrank.svg
│  │      hips.svg
│  │      hire-a-helper.svg
│  │      hooli.svg
│  │      hornbill.svg
│  │      hotjar.svg
│  │      houzz.svg
│  │      html5.svg
│  │      hubspot.svg
│  │      imdb.svg
│  │      instagram.svg
│  │      intercom.svg
│  │      internet-explorer.svg
│  │      invision.svg
│  │      ioxhost.svg
│  │      itch-io.svg
│  │      itunes-note.svg
│  │      itunes.svg
│  │      java.svg
│  │      jedi-order.svg
│  │      jenkins.svg
│  │      jira.svg
│  │      joget.svg
│  │      joomla.svg
│  │      js-square.svg
│  │      js.svg
│  │      jsfiddle.svg
│  │      kaggle.svg
│  │      keybase.svg
│  │      keycdn.svg
│  │      kickstarter-k.svg
│  │      kickstarter.svg
│  │      korvue.svg
│  │      laravel.svg
│  │      lastfm-square.svg
│  │      lastfm.svg
│  │      leanpub.svg
│  │      less.svg
│  │      line.svg
│  │      linkedin-in.svg
│  │      linkedin.svg
│  │      linode.svg
│  │      linux.svg
│  │      lyft.svg
│  │      magento.svg
│  │      mailchimp.svg
│  │      mandalorian.svg
│  │      markdown.svg
│  │      mastodon.svg
│  │      maxcdn.svg
│  │      medapps.svg
│  │      medium-m.svg
│  │      medium.svg
│  │      medrt.svg
│  │      meetup.svg
│  │      megaport.svg
│  │      mendeley.svg
│  │      microsoft.svg
│  │      mix.svg
│  │      mixcloud.svg
│  │      mizuni.svg
│  │      modx.svg
│  │      monero.svg
│  │      napster.svg
│  │      neos.svg
│  │      nimblr.svg
│  │      nintendo-switch.svg
│  │      node-js.svg
│  │      node.svg
│  │      npm.svg
│  │      ns8.svg
│  │      nutritionix.svg
│  │      odnoklassniki-square.svg
│  │      odnoklassniki.svg
│  │      old-republic.svg
│  │      opencart.svg
│  │      openid.svg
│  │      opera.svg
│  │      optin-monster.svg
│  │      osi.svg
│  │      page4.svg
│  │      pagelines.svg
│  │      palfed.svg
│  │      patreon.svg
│  │      paypal.svg
│  │      penny-arcade.svg
│  │      periscope.svg
│  │      phabricator.svg
│  │      phoenix-framework.svg
│  │      phoenix-squadron.svg
│  │      php.svg
│  │      pied-piper-alt.svg
│  │      pied-piper-hat.svg
│  │      pied-piper-pp.svg
│  │      pied-piper.svg
│  │      pinterest-p.svg
│  │      pinterest-square.svg
│  │      pinterest.svg
│  │      playstation.svg
│  │      product-hunt.svg
│  │      pushed.svg
│  │      python.svg
│  │      qq.svg
│  │      quinscape.svg
│  │      quora.svg
│  │      r-project.svg
│  │      raspberry-pi.svg
│  │      ravelry.svg
│  │      react.svg
│  │      reacteurope.svg
│  │      readme.svg
│  │      rebel.svg
│  │      red-river.svg
│  │      reddit-alien.svg
│  │      reddit-square.svg
│  │      reddit.svg
│  │      redhat.svg
│  │      renren.svg
│  │      replyd.svg
│  │      researchgate.svg
│  │      resolving.svg
│  │      rev.svg
│  │      rocketchat.svg
│  │      rockrms.svg
│  │      safari.svg
│  │      salesforce.svg
│  │      sass.svg
│  │      schlix.svg
│  │      scribd.svg
│  │      searchengin.svg
│  │      sellcast.svg
│  │      sellsy.svg
│  │      servicestack.svg
│  │      shirtsinbulk.svg
│  │      shopware.svg
│  │      simplybuilt.svg
│  │      sistrix.svg
│  │      sith.svg
│  │      sketch.svg
│  │      skyatlas.svg
│  │      skype.svg
│  │      slack-hash.svg
│  │      slack.svg
│  │      slideshare.svg
│  │      snapchat-ghost.svg
│  │      snapchat-square.svg
│  │      snapchat.svg
│  │      soundcloud.svg
│  │      sourcetree.svg
│  │      speakap.svg
│  │      speaker-deck.svg
│  │      spotify.svg
│  │      squarespace.svg
│  │      stack-exchange.svg
│  │      stack-overflow.svg
│  │      staylinked.svg
│  │      steam-square.svg
│  │      steam-symbol.svg
│  │      steam.svg
│  │      sticker-mule.svg
│  │      strava.svg
│  │      stripe-s.svg
│  │      stripe.svg
│  │      studiovinari.svg
│  │      stumbleupon-circle.svg
│  │      stumbleupon.svg
│  │      superpowers.svg
│  │      supple.svg
│  │      suse.svg
│  │      symfony.svg
│  │      teamspeak.svg
│  │      telegram-plane.svg
│  │      telegram.svg
│  │      tencent-weibo.svg
│  │      the-red-yeti.svg
│  │      themeco.svg
│  │      themeisle.svg
│  │      think-peaks.svg
│  │      trade-federation.svg
│  │      trello.svg
│  │      tripadvisor.svg
│  │      tumblr-square.svg
│  │      tumblr.svg
│  │      twitch.svg
│  │      twitter-square.svg
│  │      twitter.svg
│  │      typo3.svg
│  │      uber.svg
│  │      ubuntu.svg
│  │      uikit.svg
│  │      uniregistry.svg
│  │      untappd.svg
│  │      ups.svg
│  │      usb.svg
│  │      usps.svg
│  │      ussunnah.svg
│  │      vaadin.svg
│  │      viacoin.svg
│  │      viadeo-square.svg
│  │      viadeo.svg
│  │      viber.svg
│  │      vimeo-square.svg
│  │      vimeo-v.svg
│  │      vimeo.svg
│  │      vine.svg
│  │      vk.svg
│  │      vnv.svg
│  │      vuejs.svg
│  │      waze.svg
│  │      weebly.svg
│  │      weibo.svg
│  │      weixin.svg
│  │      whatsapp-square.svg
│  │      whatsapp.svg
│  │      whmcs.svg
│  │      wikipedia-w.svg
│  │      windows.svg
│  │      wix.svg
│  │      wizards-of-the-coast.svg
│  │      wolf-pack-battalion.svg
│  │      wordpress-simple.svg
│  │      wordpress.svg
│  │      wpbeginner.svg
│  │      wpexplorer.svg
│  │      wpforms.svg
│  │      wpressr.svg
│  │      xbox.svg
│  │      xing-square.svg
│  │      xing.svg
│  │      y-combinator.svg
│  │      yahoo.svg
│  │      yammer.svg
│  │      yandex-international.svg
│  │      yandex.svg
│  │      yarn.svg
│  │      yelp.svg
│  │      yoast.svg
│  │      youtube-square.svg
│  │      youtube.svg
│  │      zhihu.svg
│  │      
│  ├─regular
│  │      address-book.svg
│  │      address-card.svg
│  │      angry.svg
│  │      arrow-alt-circle-down.svg
│  │      arrow-alt-circle-left.svg
│  │      arrow-alt-circle-right.svg
│  │      arrow-alt-circle-up.svg
│  │      bell-slash.svg
│  │      bell.svg
│  │      bookmark.svg
│  │      building.svg
│  │      calendar-alt.svg
│  │      calendar-check.svg
│  │      calendar-minus.svg
│  │      calendar-plus.svg
│  │      calendar-times.svg
│  │      calendar.svg
│  │      caret-square-down.svg
│  │      caret-square-left.svg
│  │      caret-square-right.svg
│  │      caret-square-up.svg
│  │      chart-bar.svg
│  │      check-circle.svg
│  │      check-square.svg
│  │      circle.svg
│  │      clipboard.svg
│  │      clock.svg
│  │      clone.svg
│  │      closed-captioning.svg
│  │      comment-alt.svg
│  │      comment-dots.svg
│  │      comment.svg
│  │      comments.svg
│  │      compass.svg
│  │      copy.svg
│  │      copyright.svg
│  │      credit-card.svg
│  │      dizzy.svg
│  │      dot-circle.svg
│  │      edit.svg
│  │      envelope-open.svg
│  │      envelope.svg
│  │      eye-slash.svg
│  │      eye.svg
│  │      file-alt.svg
│  │      file-archive.svg
│  │      file-audio.svg
│  │      file-code.svg
│  │      file-excel.svg
│  │      file-image.svg
│  │      file-pdf.svg
│  │      file-powerpoint.svg
│  │      file-video.svg
│  │      file-word.svg
│  │      file.svg
│  │      flag.svg
│  │      flushed.svg
│  │      folder-open.svg
│  │      folder.svg
│  │      font-awesome-logo-full.svg
│  │      frown-open.svg
│  │      frown.svg
│  │      futbol.svg
│  │      gem.svg
│  │      grimace.svg
│  │      grin-alt.svg
│  │      grin-beam-sweat.svg
│  │      grin-beam.svg
│  │      grin-hearts.svg
│  │      grin-squint-tears.svg
│  │      grin-squint.svg
│  │      grin-stars.svg
│  │      grin-tears.svg
│  │      grin-tongue-squint.svg
│  │      grin-tongue-wink.svg
│  │      grin-tongue.svg
│  │      grin-wink.svg
│  │      grin.svg
│  │      hand-lizard.svg
│  │      hand-paper.svg
│  │      hand-peace.svg
│  │      hand-point-down.svg
│  │      hand-point-left.svg
│  │      hand-point-right.svg
│  │      hand-point-up.svg
│  │      hand-pointer.svg
│  │      hand-rock.svg
│  │      hand-scissors.svg
│  │      hand-spock.svg
│  │      handshake.svg
│  │      hdd.svg
│  │      heart.svg
│  │      hospital.svg
│  │      hourglass.svg
│  │      id-badge.svg
│  │      id-card.svg
│  │      image.svg
│  │      images.svg
│  │      keyboard.svg
│  │      kiss-beam.svg
│  │      kiss-wink-heart.svg
│  │      kiss.svg
│  │      laugh-beam.svg
│  │      laugh-squint.svg
│  │      laugh-wink.svg
│  │      laugh.svg
│  │      lemon.svg
│  │      life-ring.svg
│  │      lightbulb.svg
│  │      list-alt.svg
│  │      map.svg
│  │      meh-blank.svg
│  │      meh-rolling-eyes.svg
│  │      meh.svg
│  │      minus-square.svg
│  │      money-bill-alt.svg
│  │      moon.svg
│  │      newspaper.svg
│  │      object-group.svg
│  │      object-ungroup.svg
│  │      paper-plane.svg
│  │      pause-circle.svg
│  │      play-circle.svg
│  │      plus-square.svg
│  │      question-circle.svg
│  │      registered.svg
│  │      sad-cry.svg
│  │      sad-tear.svg
│  │      save.svg
│  │      share-square.svg
│  │      smile-beam.svg
│  │      smile-wink.svg
│  │      smile.svg
│  │      snowflake.svg
│  │      square.svg
│  │      star-half.svg
│  │      star.svg
│  │      sticky-note.svg
│  │      stop-circle.svg
│  │      sun.svg
│  │      surprise.svg
│  │      thumbs-down.svg
│  │      thumbs-up.svg
│  │      times-circle.svg
│  │      tired.svg
│  │      trash-alt.svg
│  │      user-circle.svg
│  │      user.svg
│  │      window-close.svg
│  │      window-maximize.svg
│  │      window-minimize.svg
│  │      window-restore.svg
│  │      
│  └─solid
│          ad.svg
│          address-book.svg
│          address-card.svg
│          adjust.svg
│          air-freshener.svg
│          align-center.svg
│          align-justify.svg
│          align-left.svg
│          align-right.svg
│          allergies.svg
│          ambulance.svg
│          american-sign-language-interpreting.svg
│          anchor.svg
│          angle-double-down.svg
│          angle-double-left.svg
│          angle-double-right.svg
│          angle-double-up.svg
│          angle-down.svg
│          angle-left.svg
│          angle-right.svg
│          angle-up.svg
│          angry.svg
│          ankh.svg
│          apple-alt.svg
│          archive.svg
│          archway.svg
│          arrow-alt-circle-down.svg
│          arrow-alt-circle-left.svg
│          arrow-alt-circle-right.svg
│          arrow-alt-circle-up.svg
│          arrow-circle-down.svg
│          arrow-circle-left.svg
│          arrow-circle-right.svg
│          arrow-circle-up.svg
│          arrow-down.svg
│          arrow-left.svg
│          arrow-right.svg
│          arrow-up.svg
│          arrows-alt-h.svg
│          arrows-alt-v.svg
│          arrows-alt.svg
│          assistive-listening-systems.svg
│          asterisk.svg
│          at.svg
│          atlas.svg
│          atom.svg
│          audio-description.svg
│          award.svg
│          baby-carriage.svg
│          baby.svg
│          backspace.svg
│          backward.svg
│          bacon.svg
│          balance-scale.svg
│          ban.svg
│          band-aid.svg
│          barcode.svg
│          bars.svg
│          baseball-ball.svg
│          basketball-ball.svg
│          bath.svg
│          battery-empty.svg
│          battery-full.svg
│          battery-half.svg
│          battery-quarter.svg
│          battery-three-quarters.svg
│          bed.svg
│          beer.svg
│          bell-slash.svg
│          bell.svg
│          bezier-curve.svg
│          bible.svg
│          bicycle.svg
│          binoculars.svg
│          biohazard.svg
│          birthday-cake.svg
│          blender-phone.svg
│          blender.svg
│          blind.svg
│          blog.svg
│          bold.svg
│          bolt.svg
│          bomb.svg
│          bone.svg
│          bong.svg
│          book-dead.svg
│          book-medical.svg
│          book-open.svg
│          book-reader.svg
│          book.svg
│          bookmark.svg
│          bowling-ball.svg
│          box-open.svg
│          box.svg
│          boxes.svg
│          braille.svg
│          brain.svg
│          bread-slice.svg
│          briefcase-medical.svg
│          briefcase.svg
│          broadcast-tower.svg
│          broom.svg
│          brush.svg
│          bug.svg
│          building.svg
│          bullhorn.svg
│          bullseye.svg
│          burn.svg
│          bus-alt.svg
│          bus.svg
│          business-time.svg
│          calculator.svg
│          calendar-alt.svg
│          calendar-check.svg
│          calendar-day.svg
│          calendar-minus.svg
│          calendar-plus.svg
│          calendar-times.svg
│          calendar-week.svg
│          calendar.svg
│          camera-retro.svg
│          camera.svg
│          campground.svg
│          candy-cane.svg
│          cannabis.svg
│          capsules.svg
│          car-alt.svg
│          car-battery.svg
│          car-crash.svg
│          car-side.svg
│          car.svg
│          caret-down.svg
│          caret-left.svg
│          caret-right.svg
│          caret-square-down.svg
│          caret-square-left.svg
│          caret-square-right.svg
│          caret-square-up.svg
│          caret-up.svg
│          carrot.svg
│          cart-arrow-down.svg
│          cart-plus.svg
│          cash-register.svg
│          cat.svg
│          certificate.svg
│          chair.svg
│          chalkboard-teacher.svg
│          chalkboard.svg
│          charging-station.svg
│          chart-area.svg
│          chart-bar.svg
│          chart-line.svg
│          chart-pie.svg
│          check-circle.svg
│          check-double.svg
│          check-square.svg
│          check.svg
│          cheese.svg
│          chess-bishop.svg
│          chess-board.svg
│          chess-king.svg
│          chess-knight.svg
│          chess-pawn.svg
│          chess-queen.svg
│          chess-rook.svg
│          chess.svg
│          chevron-circle-down.svg
│          chevron-circle-left.svg
│          chevron-circle-right.svg
│          chevron-circle-up.svg
│          chevron-down.svg
│          chevron-left.svg
│          chevron-right.svg
│          chevron-up.svg
│          child.svg
│          church.svg
│          circle-notch.svg
│          circle.svg
│          city.svg
│          clinic-medical.svg
│          clipboard-check.svg
│          clipboard-list.svg
│          clipboard.svg
│          clock.svg
│          clone.svg
│          closed-captioning.svg
│          cloud-download-alt.svg
│          cloud-meatball.svg
│          cloud-moon-rain.svg
│          cloud-moon.svg
│          cloud-rain.svg
│          cloud-showers-heavy.svg
│          cloud-sun-rain.svg
│          cloud-sun.svg
│          cloud-upload-alt.svg
│          cloud.svg
│          cocktail.svg
│          code-branch.svg
│          code.svg
│          coffee.svg
│          cog.svg
│          cogs.svg
│          coins.svg
│          columns.svg
│          comment-alt.svg
│          comment-dollar.svg
│          comment-dots.svg
│          comment-medical.svg
│          comment-slash.svg
│          comment.svg
│          comments-dollar.svg
│          comments.svg
│          compact-disc.svg
│          compass.svg
│          compress-arrows-alt.svg
│          compress.svg
│          concierge-bell.svg
│          cookie-bite.svg
│          cookie.svg
│          copy.svg
│          copyright.svg
│          couch.svg
│          credit-card.svg
│          crop-alt.svg
│          crop.svg
│          cross.svg
│          crosshairs.svg
│          crow.svg
│          crown.svg
│          crutch.svg
│          cube.svg
│          cubes.svg
│          cut.svg
│          database.svg
│          deaf.svg
│          democrat.svg
│          desktop.svg
│          dharmachakra.svg
│          diagnoses.svg
│          dice-d20.svg
│          dice-d6.svg
│          dice-five.svg
│          dice-four.svg
│          dice-one.svg
│          dice-six.svg
│          dice-three.svg
│          dice-two.svg
│          dice.svg
│          digital-tachograph.svg
│          directions.svg
│          divide.svg
│          dizzy.svg
│          dna.svg
│          dog.svg
│          dollar-sign.svg
│          dolly-flatbed.svg
│          dolly.svg
│          donate.svg
│          door-closed.svg
│          door-open.svg
│          dot-circle.svg
│          dove.svg
│          download.svg
│          drafting-compass.svg
│          dragon.svg
│          draw-polygon.svg
│          drum-steelpan.svg
│          drum.svg
│          drumstick-bite.svg
│          dumbbell.svg
│          dumpster-fire.svg
│          dumpster.svg
│          dungeon.svg
│          edit.svg
│          egg.svg
│          eject.svg
│          ellipsis-h.svg
│          ellipsis-v.svg
│          envelope-open-text.svg
│          envelope-open.svg
│          envelope-square.svg
│          envelope.svg
│          equals.svg
│          eraser.svg
│          ethernet.svg
│          euro-sign.svg
│          exchange-alt.svg
│          exclamation-circle.svg
│          exclamation-triangle.svg
│          exclamation.svg
│          expand-arrows-alt.svg
│          expand.svg
│          external-link-alt.svg
│          external-link-square-alt.svg
│          eye-dropper.svg
│          eye-slash.svg
│          eye.svg
│          fast-backward.svg
│          fast-forward.svg
│          fax.svg
│          feather-alt.svg
│          feather.svg
│          female.svg
│          fighter-jet.svg
│          file-alt.svg
│          file-archive.svg
│          file-audio.svg
│          file-code.svg
│          file-contract.svg
│          file-csv.svg
│          file-download.svg
│          file-excel.svg
│          file-export.svg
│          file-image.svg
│          file-import.svg
│          file-invoice-dollar.svg
│          file-invoice.svg
│          file-medical-alt.svg
│          file-medical.svg
│          file-pdf.svg
│          file-powerpoint.svg
│          file-prescription.svg
│          file-signature.svg
│          file-upload.svg
│          file-video.svg
│          file-word.svg
│          file.svg
│          fill-drip.svg
│          fill.svg
│          film.svg
│          filter.svg
│          fingerprint.svg
│          fire-alt.svg
│          fire-extinguisher.svg
│          fire.svg
│          first-aid.svg
│          fish.svg
│          fist-raised.svg
│          flag-checkered.svg
│          flag-usa.svg
│          flag.svg
│          flask.svg
│          flushed.svg
│          folder-minus.svg
│          folder-open.svg
│          folder-plus.svg
│          folder.svg
│          font-awesome-logo-full.svg
│          font.svg
│          football-ball.svg
│          forward.svg
│          frog.svg
│          frown-open.svg
│          frown.svg
│          funnel-dollar.svg
│          futbol.svg
│          gamepad.svg
│          gas-pump.svg
│          gavel.svg
│          gem.svg
│          genderless.svg
│          ghost.svg
│          gift.svg
│          gifts.svg
│          glass-cheers.svg
│          glass-martini-alt.svg
│          glass-martini.svg
│          glass-whiskey.svg
│          glasses.svg
│          globe-africa.svg
│          globe-americas.svg
│          globe-asia.svg
│          globe-europe.svg
│          globe.svg
│          golf-ball.svg
│          gopuram.svg
│          graduation-cap.svg
│          greater-than-equal.svg
│          greater-than.svg
│          grimace.svg
│          grin-alt.svg
│          grin-beam-sweat.svg
│          grin-beam.svg
│          grin-hearts.svg
│          grin-squint-tears.svg
│          grin-squint.svg
│          grin-stars.svg
│          grin-tears.svg
│          grin-tongue-squint.svg
│          grin-tongue-wink.svg
│          grin-tongue.svg
│          grin-wink.svg
│          grin.svg
│          grip-horizontal.svg
│          grip-lines-vertical.svg
│          grip-lines.svg
│          grip-vertical.svg
│          guitar.svg
│          h-square.svg
│          hamburger.svg
│          hammer.svg
│          hamsa.svg
│          hand-holding-heart.svg
│          hand-holding-usd.svg
│          hand-holding.svg
│          hand-lizard.svg
│          hand-middle-finger.svg
│          hand-paper.svg
│          hand-peace.svg
│          hand-point-down.svg
│          hand-point-left.svg
│          hand-point-right.svg
│          hand-point-up.svg
│          hand-pointer.svg
│          hand-rock.svg
│          hand-scissors.svg
│          hand-spock.svg
│          hands-helping.svg
│          hands.svg
│          handshake.svg
│          hanukiah.svg
│          hard-hat.svg
│          hashtag.svg
│          hat-wizard.svg
│          haykal.svg
│          hdd.svg
│          heading.svg
│          headphones-alt.svg
│          headphones.svg
│          headset.svg
│          heart-broken.svg
│          heart.svg
│          heartbeat.svg
│          helicopter.svg
│          highlighter.svg
│          hiking.svg
│          hippo.svg
│          history.svg
│          hockey-puck.svg
│          holly-berry.svg
│          home.svg
│          horse-head.svg
│          horse.svg
│          hospital-alt.svg
│          hospital-symbol.svg
│          hospital.svg
│          hot-tub.svg
│          hotdog.svg
│          hotel.svg
│          hourglass-end.svg
│          hourglass-half.svg
│          hourglass-start.svg
│          hourglass.svg
│          house-damage.svg
│          hryvnia.svg
│          i-cursor.svg
│          ice-cream.svg
│          icicles.svg
│          id-badge.svg
│          id-card-alt.svg
│          id-card.svg
│          igloo.svg
│          image.svg
│          images.svg
│          inbox.svg
│          indent.svg
│          industry.svg
│          infinity.svg
│          info-circle.svg
│          info.svg
│          italic.svg
│          jedi.svg
│          joint.svg
│          journal-whills.svg
│          kaaba.svg
│          key.svg
│          keyboard.svg
│          khanda.svg
│          kiss-beam.svg
│          kiss-wink-heart.svg
│          kiss.svg
│          kiwi-bird.svg
│          landmark.svg
│          language.svg
│          laptop-code.svg
│          laptop-medical.svg
│          laptop.svg
│          laugh-beam.svg
│          laugh-squint.svg
│          laugh-wink.svg
│          laugh.svg
│          layer-group.svg
│          leaf.svg
│          lemon.svg
│          less-than-equal.svg
│          less-than.svg
│          level-down-alt.svg
│          level-up-alt.svg
│          life-ring.svg
│          lightbulb.svg
│          link.svg
│          lira-sign.svg
│          list-alt.svg
│          list-ol.svg
│          list-ul.svg
│          list.svg
│          location-arrow.svg
│          lock-open.svg
│          lock.svg
│          long-arrow-alt-down.svg
│          long-arrow-alt-left.svg
│          long-arrow-alt-right.svg
│          long-arrow-alt-up.svg
│          low-vision.svg
│          luggage-cart.svg
│          magic.svg
│          magnet.svg
│          mail-bulk.svg
│          male.svg
│          map-marked-alt.svg
│          map-marked.svg
│          map-marker-alt.svg
│          map-marker.svg
│          map-pin.svg
│          map-signs.svg
│          map.svg
│          marker.svg
│          mars-double.svg
│          mars-stroke-h.svg
│          mars-stroke-v.svg
│          mars-stroke.svg
│          mars.svg
│          mask.svg
│          medal.svg
│          medkit.svg
│          meh-blank.svg
│          meh-rolling-eyes.svg
│          meh.svg
│          memory.svg
│          menorah.svg
│          mercury.svg
│          meteor.svg
│          microchip.svg
│          microphone-alt-slash.svg
│          microphone-alt.svg
│          microphone-slash.svg
│          microphone.svg
│          microscope.svg
│          minus-circle.svg
│          minus-square.svg
│          minus.svg
│          mitten.svg
│          mobile-alt.svg
│          mobile.svg
│          money-bill-alt.svg
│          money-bill-wave-alt.svg
│          money-bill-wave.svg
│          money-bill.svg
│          money-check-alt.svg
│          money-check.svg
│          monument.svg
│          moon.svg
│          mortar-pestle.svg
│          mosque.svg
│          motorcycle.svg
│          mountain.svg
│          mouse-pointer.svg
│          mug-hot.svg
│          music.svg
│          network-wired.svg
│          neuter.svg
│          newspaper.svg
│          not-equal.svg
│          notes-medical.svg
│          object-group.svg
│          object-ungroup.svg
│          oil-can.svg
│          om.svg
│          otter.svg
│          outdent.svg
│          pager.svg
│          paint-brush.svg
│          paint-roller.svg
│          palette.svg
│          pallet.svg
│          paper-plane.svg
│          paperclip.svg
│          parachute-box.svg
│          paragraph.svg
│          parking.svg
│          passport.svg
│          pastafarianism.svg
│          paste.svg
│          pause-circle.svg
│          pause.svg
│          paw.svg
│          peace.svg
│          pen-alt.svg
│          pen-fancy.svg
│          pen-nib.svg
│          pen-square.svg
│          pen.svg
│          pencil-alt.svg
│          pencil-ruler.svg
│          people-carry.svg
│          pepper-hot.svg
│          percent.svg
│          percentage.svg
│          person-booth.svg
│          phone-slash.svg
│          phone-square.svg
│          phone-volume.svg
│          phone.svg
│          piggy-bank.svg
│          pills.svg
│          pizza-slice.svg
│          place-of-worship.svg
│          plane-arrival.svg
│          plane-departure.svg
│          plane.svg
│          play-circle.svg
│          play.svg
│          plug.svg
│          plus-circle.svg
│          plus-square.svg
│          plus.svg
│          podcast.svg
│          poll-h.svg
│          poll.svg
│          poo-storm.svg
│          poo.svg
│          poop.svg
│          portrait.svg
│          pound-sign.svg
│          power-off.svg
│          pray.svg
│          praying-hands.svg
│          prescription-bottle-alt.svg
│          prescription-bottle.svg
│          prescription.svg
│          print.svg
│          procedures.svg
│          project-diagram.svg
│          puzzle-piece.svg
│          qrcode.svg
│          question-circle.svg
│          question.svg
│          quidditch.svg
│          quote-left.svg
│          quote-right.svg
│          quran.svg
│          radiation-alt.svg
│          radiation.svg
│          rainbow.svg
│          random.svg
│          receipt.svg
│          recycle.svg
│          redo-alt.svg
│          redo.svg
│          registered.svg
│          reply-all.svg
│          reply.svg
│          republican.svg
│          restroom.svg
│          retweet.svg
│          ribbon.svg
│          ring.svg
│          road.svg
│          robot.svg
│          rocket.svg
│          route.svg
│          rss-square.svg
│          rss.svg
│          ruble-sign.svg
│          ruler-combined.svg
│          ruler-horizontal.svg
│          ruler-vertical.svg
│          ruler.svg
│          running.svg
│          rupee-sign.svg
│          sad-cry.svg
│          sad-tear.svg
│          satellite-dish.svg
│          satellite.svg
│          save.svg
│          school.svg
│          screwdriver.svg
│          scroll.svg
│          sd-card.svg
│          search-dollar.svg
│          search-location.svg
│          search-minus.svg
│          search-plus.svg
│          search.svg
│          seedling.svg
│          server.svg
│          shapes.svg
│          share-alt-square.svg
│          share-alt.svg
│          share-square.svg
│          share.svg
│          shekel-sign.svg
│          shield-alt.svg
│          ship.svg
│          shipping-fast.svg
│          shoe-prints.svg
│          shopping-bag.svg
│          shopping-basket.svg
│          shopping-cart.svg
│          shower.svg
│          shuttle-van.svg
│          sign-in-alt.svg
│          sign-language.svg
│          sign-out-alt.svg
│          sign.svg
│          signal.svg
│          signature.svg
│          sim-card.svg
│          sitemap.svg
│          skating.svg
│          skiing-nordic.svg
│          skiing.svg
│          skull-crossbones.svg
│          skull.svg
│          slash.svg
│          sleigh.svg
│          sliders-h.svg
│          smile-beam.svg
│          smile-wink.svg
│          smile.svg
│          smog.svg
│          smoking-ban.svg
│          smoking.svg
│          sms.svg
│          snowboarding.svg
│          snowflake.svg
│          snowman.svg
│          snowplow.svg
│          socks.svg
│          solar-panel.svg
│          sort-alpha-down.svg
│          sort-alpha-up.svg
│          sort-amount-down.svg
│          sort-amount-up.svg
│          sort-down.svg
│          sort-numeric-down.svg
│          sort-numeric-up.svg
│          sort-up.svg
│          sort.svg
│          spa.svg
│          space-shuttle.svg
│          spider.svg
│          spinner.svg
│          splotch.svg
│          spray-can.svg
│          square-full.svg
│          square-root-alt.svg
│          square.svg
│          stamp.svg
│          star-and-crescent.svg
│          star-half-alt.svg
│          star-half.svg
│          star-of-david.svg
│          star-of-life.svg
│          star.svg
│          step-backward.svg
│          step-forward.svg
│          stethoscope.svg
│          sticky-note.svg
│          stop-circle.svg
│          stop.svg
│          stopwatch.svg
│          store-alt.svg
│          store.svg
│          stream.svg
│          street-view.svg
│          strikethrough.svg
│          stroopwafel.svg
│          subscript.svg
│          subway.svg
│          suitcase-rolling.svg
│          suitcase.svg
│          sun.svg
│          superscript.svg
│          surprise.svg
│          swatchbook.svg
│          swimmer.svg
│          swimming-pool.svg
│          synagogue.svg
│          sync-alt.svg
│          sync.svg
│          syringe.svg
│          table-tennis.svg
│          table.svg
│          tablet-alt.svg
│          tablet.svg
│          tablets.svg
│          tachometer-alt.svg
│          tag.svg
│          tags.svg
│          tape.svg
│          tasks.svg
│          taxi.svg
│          teeth-open.svg
│          teeth.svg
│          temperature-high.svg
│          temperature-low.svg
│          tenge.svg
│          terminal.svg
│          text-height.svg
│          text-width.svg
│          th-large.svg
│          th-list.svg
│          th.svg
│          theater-masks.svg
│          thermometer-empty.svg
│          thermometer-full.svg
│          thermometer-half.svg
│          thermometer-quarter.svg
│          thermometer-three-quarters.svg
│          thermometer.svg
│          thumbs-down.svg
│          thumbs-up.svg
│          thumbtack.svg
│          ticket-alt.svg
│          times-circle.svg
│          times.svg
│          tint-slash.svg
│          tint.svg
│          tired.svg
│          toggle-off.svg
│          toggle-on.svg
│          toilet-paper.svg
│          toilet.svg
│          toolbox.svg
│          tools.svg
│          tooth.svg
│          torah.svg
│          torii-gate.svg
│          tractor.svg
│          trademark.svg
│          traffic-light.svg
│          train.svg
│          tram.svg
│          transgender-alt.svg
│          transgender.svg
│          trash-alt.svg
│          trash-restore-alt.svg
│          trash-restore.svg
│          trash.svg
│          tree.svg
│          trophy.svg
│          truck-loading.svg
│          truck-monster.svg
│          truck-moving.svg
│          truck-pickup.svg
│          truck.svg
│          tshirt.svg
│          tty.svg
│          tv.svg
│          umbrella-beach.svg
│          umbrella.svg
│          underline.svg
│          undo-alt.svg
│          undo.svg
│          universal-access.svg
│          university.svg
│          unlink.svg
│          unlock-alt.svg
│          unlock.svg
│          upload.svg
│          user-alt-slash.svg
│          user-alt.svg
│          user-astronaut.svg
│          user-check.svg
│          user-circle.svg
│          user-clock.svg
│          user-cog.svg
│          user-edit.svg
│          user-friends.svg
│          user-graduate.svg
│          user-injured.svg
│          user-lock.svg
│          user-md.svg
│          user-minus.svg
│          user-ninja.svg
│          user-nurse.svg
│          user-plus.svg
│          user-secret.svg
│          user-shield.svg
│          user-slash.svg
│          user-tag.svg
│          user-tie.svg
│          user-times.svg
│          user.svg
│          users-cog.svg
│          users.svg
│          utensil-spoon.svg
│          utensils.svg
│          vector-square.svg
│          venus-double.svg
│          venus-mars.svg
│          venus.svg
│          vial.svg
│          vials.svg
│          video-slash.svg
│          video.svg
│          vihara.svg
│          volleyball-ball.svg
│          volume-down.svg
│          volume-mute.svg
│          volume-off.svg
│          volume-up.svg
│          vote-yea.svg
│          vr-cardboard.svg
│          walking.svg
│          wallet.svg
│          warehouse.svg
│          water.svg
│          wave-square.svg
│          weight-hanging.svg
│          weight.svg
│          wheelchair.svg
│          wifi.svg
│          wind.svg
│          window-close.svg
│          window-maximize.svg
│          window-minimize.svg
│          window-restore.svg
│          wine-bottle.svg
│          wine-glass-alt.svg
│          wine-glass.svg
│          won-sign.svg
│          wrench.svg
│          x-ray.svg
│          yen-sign.svg
│          yin-yang.svg
│          
└─webfonts
        fa-brands-400.eot
        fa-brands-400.svg
        fa-brands-400.ttf
        fa-brands-400.woff
        fa-brands-400.woff2
        fa-regular-400.eot
        fa-regular-400.svg
        fa-regular-400.ttf
        fa-regular-400.woff
        fa-regular-400.woff2
        fa-solid-900.eot
        fa-solid-900.svg
        fa-solid-900.ttf
        fa-solid-900.woff
        fa-solid-900.woff2

Webfont版

WEBサイトを公開するサーバ上に、ダウンロードした「webfonts」フォルダと「css」フォルダをアップします。すべてのアイコンを利用する場合は「css」フォルダ内の「all.min.css」または「all.css」のみアップします。

// サーバ上のデータ
├─css
│      all.min.css
└─webfonts
        fa-brands-400.eot
        fa-brands-400.svg
        fa-brands-400.ttf
        fa-brands-400.woff
        fa-brands-400.woff2
        fa-regular-400.eot
        fa-regular-400.svg
        fa-regular-400.ttf
        fa-regular-400.woff
        fa-regular-400.woff2
        fa-solid-900.eot
        fa-solid-900.svg
        fa-solid-900.ttf
        fa-solid-900.woff
        fa-solid-900.woff2

アイコンを表示したいページのHTMLソース内で、以下のようにスタイルシートを読み込みます。スタイルシート内に「webfonts」内のファイルを読み込むためのリンクが記述されていますので、フォルダ注意してください。

<link rel="stylesheet" href="/css/all.min.css">

SVG版

WEBサイトを公開するサーバ上に、ダウンロードした「js」フォルダをアップします。すべてのアイコンを利用する場合は「css」フォルダ内の「all.min.js」または「all.js」のみアップします。

// サーバ上のデータ
└─css
        all.min.js

アイコンを表示したいページのHTMLソース内で、以下のようにjavascriptを読み込みます。javascript内にSVG形式でアイコンの情報が記述されているので、javascriptのみでアイコンを表示することができます。

<script defer src="/js/all.js"></script>

Font Awesome 5 の使用方法

アイコンを表示したいページのHTMLソース内で、アイコンを表示するiタグとクラス指定する方法と、ユニコードを使用する方法があります。

// 記述例:フォントアイコン
<i class="fas fa-font"></i>

クラス指定の「fa-font」部分を変えることでアイコンを変更することができます。

Font Awesome 5のライセンス

Font Awesome Free のライセンスはMIT, SIL OFL, and CC BYにより、オープンソースとして個人、商用にも利用することが可能です。アイコンデータ、ソースコードごとライセンスが異なるので、詳しくはFont Awesome の公式サイトを参照ください。

Icons — CC BY 4.0 License
Fonts — SIL OFL 1.1 License
Code — MIT License

関連記事

富士山本宮浅間大社「桜」フォトギャラリー

富士宮にある富士山本宮浅間大社で桜を見てきました。ちょうど天気もよく青空に映えるキレイな桜を写真に撮ることもできました。 富士山本宮浅間大社は、富士山の龍脈の気が留まる龍穴(大地の気がみなぎる場所)のパワースポットとして開運神社として知られています。 主祭神には、神界...続きを読む

2015.04.09フォトギャラリー

新年あけましておめでとうございます。

あけましておめでとうございます。 昨年は格別 の御厚情を賜り、厚く御礼を申し上げます。 本年もデザインスタジオ・エフでは、皆様にご満足頂けるサービスを心がけていく所存でございますので、何とぞ昨年同様のご愛顧を賜わりますよう、お願い申し上げます。皆様のご健勝と皆様の益々のご...続きを読む

2019.01.01

藤枝おんぱく2019「No.31 出世城‼田中城に秘められた パワースポットすまいるウォーキング!」

5月12日に開催された藤枝おんぱく2019のプログラム、No31.出世城‼田中城に秘められた パワースポットすまいるウォーキング!に行ってきました。 藤枝に住んで30余年、身近なところに住んでいても知らなかった田中城の周辺を巡るウィーキングです! 今回巡...続きを読む

2019.05.30フォトギャラリー藤枝

Micro hair saron様WEBサイトのデザイン提案

Micro hair saron様WEBサイトのデザイン提案。店内のインテリアやお店の雰囲気、「シンプル」でありながら心地よさを感じられるようなデザインを心掛けました。お店のコンセプトである「髪だけでなく 時間と空間をデザインして 五感で満足していただくこと。」木の温もりと、...続きを読む

2019.04.24WEBデザイン美容室

HTML5の可能性とメリット

HTML5とは? W3C より2008年1月22日にHTML5のドラフト(草案)が発表、2014年には正式に勧告されるのではないかと言われています。 HTML5は、ウェブページのヘッダ情報を示すhead要素、ナビゲーションのブロック用のnav要素、コピーライトなどのフッタ...続きを読む

2015.02.06HTMLコーディング