簡単に使えるCSS パート?B
Webフォント Font Awesomeの使い方
Font Awesome
http://fontawesome.io/
「Font Awesome」＆CSSを使ってWebフォントをブログに掲載出来るテクニックをご紹介します。
Webフォントは、写真でもなく、フォント（文字）扱いなので、写真のようにアップロード＆加工する必要もありません。
決まったTAGをブログに貼り付けるだけで、絵文字のように簡単に可愛いキャラクタなどを文章に追加できます。
では、早速、どのようなものか見てみましょう。
初期設定
まず最初に、以下のおまじないのようなコードを ブログの中に貼り付けます。※なるべく、先頭に貼り付けましょう。
※リンクも含めた赤い部分、全部です。
<link rel="stylesheet"href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css ">
これは何をしているかと言うと、font-awesomeのサイトから、WEBフォントの部品を使う許可をもらっていると考えてください。この初期設定をしないと、以下のソースコードをいくら貼り付けしても無効になって使えません。
では、具体的なアイコンを見てみましょう。
◇camera-retro
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
ソースコード
<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>
※fa-lg、fa-2x〜fa-5xというのは、WEBフォントの大きさを意味しています。分かりやすいように右側に書きました。
好きな大きさの行をコピーして、ご自身のブログに 貼り付けしてください。
◇hand-o-right
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
ソースコード
<i class="fa fa-hand-o-right fa-lg" aria-hidden="true"></i>
<i class="fa fa-hand-o-right fa-2x" aria-hidden="true"></i>
<i class="fa fa-hand-o-right fa-3x" aria-hidden="true"></i>
<i class="fa fa-hand-o-right fa-4x" aria-hidden="true"></i>
<i class="fa fa-hand-o-right fa-5x" aria-hidden="true"></i>
◇taxi
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
ソースコード
<i class="fa fa-taxi fa-lg" aria-hidden="true"></i>
<i class="fa fa-taxi fa-2x" aria-hidden="true"></i>
<i class="fa fa-taxi fa-3x" aria-hidden="true"></i>
<i class="fa fa-taxi fa-4x" aria-hidden="true"></i>
<i class="fa fa-taxi fa-5x" aria-hidden="true"></i>
どうですか？
Font AwesomeのWEBフォント、アイコンは、６００種類以上あるようです。以下のサイトでお好きなものを選んで見てくださいね。
http://fontawesome.io/icons/
また、フォントですので、色を簡単につけることも出来ます。
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
※色を付けるコードの書き方例
<span style="color:#006565;"><i class="fa fa-taxi fa-lg" aria-hidden="true"></i></span>
<span style="color:#FF0032;"><i class="fa fa-taxi fa-2x" aria-hidden="true"></i></span>
<span style="color:#32CB00;"><i class="fa fa-taxi fa-3x" aria-hidden="true"></i></span>
<span style="color:#32CBFF;"><i class="fa fa-taxi fa-4x" aria-hidden="true"></i></span>
<span style="color:#FF9832;"><i class="fa fa-taxi fa-5x" aria-hidden="true"></i></span>
color:#FF9832の部分をHTMLのカラーコードを変更することで、お好きな色に変更できます。
HTMLカラーコードのサイト
HTML color codes
補足：以下のようにすると、回転も出来ます。ご参考まで。
90度回転
180度回転
270度回転
左右反転
上下反転
ソースコード
<span style="color:#006565;"><i class="fa fa-taxi fa-lg fa-rotate-90" aria-hidden="true"></i> 90度回転</span>
<span style="color:#FF0032;"><i class="fa fa-taxi fa-2x fa-rotate-180" aria-hidden="true"></i> 180度回転</span>
<span style="color:#32CB00;"><i class="fa fa-taxi fa-3x fa-rotate-270" aria-hidden="true"></i> 270度回転</span>
<span style="color:#32CBFF;"><i class="fa fa-taxi fa-4x fa-flip-horizontal" aria-hidden="true"></i> 左右反転</span>
<span style="color:#FF9832;"><i class="fa fa-taxi fa-5x fa-flip-vertical" aria-hidden="true"></i> 上下反転</span>
ブログの文章の装飾に是非つかって見てください。(^^)/
【このカテゴリーの最新記事】
- no image
- no image
-
