Webフォントで作るローディング画像
= ローディング時に使えるアニメーション画像を用意しました =

  • 前のページまでは、様々な「ローディング画像」を紹介してきましたが、ここでは「Webアイコンフォント」を使う方法を紹介します。
  • Webアイコンフォントとは、ウェブページで文字と同じように表示できるアイコンのことで、当サイトでも、矢印「」や、ホームアイコン「」、Amazonへのリンクでのカートアイコン「」などに使用しています。
  • また、「きょうは何の記念日 」では、読み込むデータがやや大きいため、Circle「」を使っています。
  • 「Font Awesome」というサービスを使います。
  • 作成した画像を使うのと違い、色もサイズも簡単に変えることができます。
  • このWebアイコンフォントの利点は、ダウンロードしなくても使えることで、配布サイトへリンクをして使用します。(もちろん、自分の手元にダウンロードして使うこともできます)
  • 下記のタグを <head></head> 内に設置し、使いたいアイコンのタグをページ内に設置します。
    • <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    • アップデートされている場合があります。公式サイトでご確認ください。
      Font Awesome  
  • このページで使っている「矢印」「ホーム」「カート」のアイコンのタグは下記のようなものです。(実際には、これにフォントサイズやカラーを設定して使用しています)
    • 矢印 :<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
    • ホーム :<i class="fa fa-home" aria-hidden="true"></i>
    • カート :<i class="fa fa-shopping-cart" aria-hidden="true"></i>
    • サークル :<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
  • アイコンの見本ははこちらにあります。
  • では、ローディング画像として使えそうなアイコンを紹介します。
  • 次のアイコンが「Animated Icons」として紹介されています。
       <i class="fa fa-spinner fa-2x fa-fw"></i>
       <i class="fa fa-circle-o-notch fa-2x fa-fw"></i>
       <i class="fa fa-refresh fa-2x fa-fw"></i>
       <i class="fa fa-cog fa-2x fa-fw"></i>
  • これらのアイコンに回転の効果を付け、さらに大きさや色など加えることができます。
  • 次のアイコンは、タグの中に「fa-spin」もしくは「fa-pulse」を書いて回転させています。
  • 大きさは、「fa-3x」と書いて、3倍の大きさにしています。大きさは「fa-5x」まで設定することができるようです。
    •   <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>

    •   <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>

    •   <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>

    •   <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>

    •   <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
  • 次に、色を付けたり、大きさを変えてみたりします。
  • 色は、タグの中に設定します。ここでは、「style="color: red"」のように「styl」で設定していますが、CSSでカラーの指定ができる場合は、「class」で設定することもできます。
  • 色は自由自在です。こちらのページなどを参考に設定してみてください。
    • <i class="fa fa-spinner fa-spin fa-5x fa-fw" style="color: red"></i>

    • <i class="fa fa-spinner fa-spin fa-4x fa-fw" style="color: brown"></i>

    • <i class="fa fa-circle-o-notch fa-spin fa-4x fa-fw" style="color: cornflowerblue"></i>

    • <i class="fa fa-refresh fa-spin fa-3x fa-fw" style="color: green"></i>

    • <i class="fa fa-cog fa-spin fa-2x fa-fw" style="color: indigo"></i>

    • <i class="fa fa-spinner fa-pulse fa-2x fa-fw" style="color: mediumblue"></i>

    • <i class="fa fa-spinner fa-pulse fa-2x fa-fw" style="color: deeppink"></i>

おすすめサイト・関連サイト…

Last updated : 2020/02/15