WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

Font Awesomeの使い方と使いそうなものメモ

Font Awesomeの使い方

Webフォントアイコンを使用すると画像が無くてもアイコンを表示することができる。
CSSでサイズや色を変更したり影をつけたりすることも可能。
大きく表示してもきれいに表示することができる。

fontawesome.io

サイトからファイルをダウンロードかCDNでCSSを読み込む
更新したものや変更が加わったりすることがあるので
新しいファイルを読み込むのがよい

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

サイトの使いたいアイコンのページを開き、
iで始まるタグをHTMLの任意の場所に張り付ければ表示することができる。

サイズ変更

「fa-lg」1.33倍
「fa-2x」2倍
「fa-3x」3倍
「fa-4x」4倍
「fa-5x」5倍
これより大きくしたい場合はCSSのフォントサイズで調整

回転

クラスに
「fa-rotate-90」
「fa-rotate-180」
「fa-rotate-270」
を追加
他の値にしたい場合はCSSで調整する。

回転アニメーション

クラスに「fa-spin」を追加で時計回りにアニメーション

クラスに「fa-pulse」を追加で45度ずつ回転

横幅を固定

複数のアイコンの横幅を揃えたいときなど
クラス「fa-fw」を追加する。

回り込み

クラスに
「fa-pull-left」または
「fa-pull-right」
を追加。

反転

水平方向に反転
「fa-flip-horizontal」

垂直方向に反転
「fa-flip-vertical」

使いそうなものメモ

矢印系

<i class="fa fa-angle-down" aria-hidden="true"></i>

<i class="fa fa-angle-right" aria-hidden="true"></i>

<i class="fa fa-chevron-down" aria-hidden="true"></i>

<i class="fa fa-chevron-right" aria-hidden="true"></i>

<i class="fa fa-caret-down" aria-hidden="true"></i>

<i class="fa fa-caret-right" aria-hidden="true"></i>

<i class="fa fa-arrow-right" aria-hidden="true"></i>

左や上もある。

WEBサービス

Twitter

<i class="fa fa-twitter" aria-hidden="true"></i>

Facebook

<i class="fa fa-facebook-official" aria-hidden="true"></i>

Instagram

<i class="fa fa-instagram" aria-hidden="true"></i>

YouTube

<i class="fa fa-youtube" aria-hidden="true"></i>

YouTubeその2

<i class="fa fa-youtube-play" aria-hidden="true"></i>

tumblr

<i class="fa fa-tumblr" aria-hidden="true"></i>

WordPress

<i class="fa fa-wordpress" aria-hidden="true"></i>

Vine

<i class="fa fa-vine" aria-hidden="true"></i>

GitHub

<i class="fa fa-github" aria-hidden="true"></i>

ブラウザ系

Google Chrome

<i class="fa fa-chrome" aria-hidden="true"></i>

Firefox

<i class="fa fa-firefox" aria-hidden="true"></i>

Safari

<i class="fa fa-safari" aria-hidden="true"></i>

Opera

<i class="fa fa-opera" aria-hidden="true"></i>

InternetExplorer

<i class="fa fa-internet-explorer" aria-hidden="true"></i>

言語

HTML5

<i class="fa fa-html5" aria-hidden="true"></i>

CSS3

<i class="fa fa-css3" aria-hidden="true"></i>

ブログで使えそう

タグ

<i class="fa fa-tag" aria-hidden="true"></i>

フォルダー

<i class="fa fa-folder" aria-hidden="true"></i>

コメント

メール

<i class="fa fa-envelope" aria-hidden="true"></i>

RSS

<i class="fa fa-rss" aria-hidden="true"></i>

シェア

<i class="fa fa-share" aria-hidden="true"></i>

その他

リターンする時など

<i class="fa fa-refresh" aria-hidden="true"></i>

Google

<i class="fa fa-google" aria-hidden="true"></i>

Apple

<i class="fa fa-apple" aria-hidden="true"></i>

Android

<i class="fa fa-android" aria-hidden="true"></i>

Windows

<i class="fa fa-windows" aria-hidden="true"></i>

ロック

<i class="fa fa-lock" aria-hidden="true"></i>

注意

<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>

メニュー

<i class="fa fa-bars" aria-hidden="true"></i>

閉じる

<i class="fa fa-times" aria-hidden="true"></i>

登録商標マーク(registered)

<i class="fa fa-registered" aria-hidden="true"></i>

コピーライト

<i class="fa fa-copyright" aria-hidden="true"></i>

ローディング

<i class="fa fa-spinner" aria-hidden="true"></i>

歯車

<i class="fa fa-cog" aria-hidden="true"></i>