django備忘録24 Icons with Font Awesome

Font Awesomeを使ったIconの挿入

• fonrt awesome にアクセス Font Awesome, the iconic font and CSS toolkit

• 好きなアイコンをクリック→css のコードをコピー これだけだと反映されない。

...
    <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>