読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

django備忘録24 Icons with Font Awesome

Font Awesomeを使ったIconの挿入

...
    <div class="col-sm-3">
        <p class='lead text-align-center'>Fast</p>
        <i class="fa fa-ship" aria-hidden="true"></i>
    </div>
...
  • bootstrapに読み込ませる。 オススメは、BootstrapCDN by MaxCDNとのこと。

Font Awesome · BootstrapCDN by MaxCDN

head_css.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

これでさっきのアイコンが反映される

  • フォントの大きさを調整したい場合は、examplesを見ると解りやすい。

Font Awesome Examples

'' で、ちょっと大き目のアイコンが表示できる。

  • text-align-centerなどのstyleの適用も可能。
        <p class='lead text-align-center'>Fast
        </br>
        <i class="fa fa-ship fa-5x" aria-hidden="true"></i>
        </p>
  • animation icon の導入も簡単

以下のように、exapmlesから持ってくるだけ

        <i class="fa fa-cog fa-spin fa-5x fa-fw"></i>
        <span class="sr-only">Loading...</span>

class の、fa-spin が回るanimationを表すところ

  • 他にもサンプルが沢山ある。

  • colorも変更が簡単。 css なので、styleを変更するだけでOK。

    <div class="col-sm-3" style='color:green;'>
        <p class='lead text-align-center'>Fast
        </br>
        <i class="fa fa-ship fa-5x" aria-hidden="true"></i>
        </p>
    </div>