[英語deIT]よく使うfont awesome5について　超入門編

今回は IT×英語留学で学んだ

font awesomeについて説明したいと思います。

もちろん、英語ベースで！

わたしが勉強した事の復習です

Font awesome(フォントオーサム）のサイト

Font awesome（フォントオーサム）のサイトで色んなアイコンが無料で使えます。

どんなアイコンがあるのかざっくり見ていきましょう！

その後でHTMLの説明をします。

ITでよく見かけるSNSアイコン

＊サイズを2倍・色をつけて見やすくしてみました。

Facebook(フェイスブック）

Twitter（ツイッター）

Instagram（インスタグラム）

Pinterest(ピンタレスト)

Snapchat(スナップチャット）

google+ （グーグルプラス）

こんな感じでFont awesome（フォントオーサム）が使えます。

Snapchat(スナップチャット）はアイコンは見たことあるけど..名前がわからなくって探すのに苦労しました..

Fontawesomeで他にもよく使うアイコン名（英語）

アイコンを探すときに

これって英語で何っていうの？？

User （ユーザー）

cog(コグ）/Setting　　（歯車/設定）

arrow-up （上矢印）

location　（位置）

cloud upload　クラウドもしくはアップロード

Phone　（電話）ちょっとSpin（スピン：くるくる回る）使ってみましたw

SMS　（メッセージ）　初期設定の5倍サイズ

Envelope　（封筒）初期設定の5倍サイズ

Font awesome(フォントオーサム)を実際に使ってみよう

アイコンがどんなものがあるのかをざっとみたので、実際にHTMLにリンクを入れて実装します。

STEP1:Font awesome(フォントオーサム)のリンクをコピー

Step2:テキストエディタ sublime使ってます）に戻って,

HTMLの＜head（ヘッド）＞部分にペースト

Sublime（サブライム）の使い方がわからない方は

Bootstrap4の使い方の所にSublimeの使い方も書いてます

これでFont awesome(フォントオーサム)が使えるようになりました。

Step3:Font awesome で使いたいアイコンのコードをコピー

HTML＜body(ボディー）＞以下にペーストしたらOK

あとは使いたいアイコンを探してコピペ（コピー＆ペースト）→保存したら終了です。

default(初期の設定）だとアイコンは黒で小さいです。

Font awesome(フォントオーサム)にはプロ用（有料）もあります。

Font awesome5 アイコンの色・サイズ色々

HTMLの記述

<i class=””>〜の部分は使おうと思っていたSNSのアイコン達のコピペになります。

画像なのでコピペできないけど。ごめんね。

fa-spin:でくるくる回転

fa-fwでアイコンの位置がやや中央よりになるので追加して遊んでみようね。
色を変えるときはCSSを記述します。

ちなみによく使ってたカラーコードの表のサイトがあるので紹介します。私はほぼ毎日見てました。#00FFFFも色のコードです。

Font awesomeのコピーの仕方

Webの知識がない人や初心者にとってコーピーにも手こずることが..

あれっ？一部だけ色が変わってコピーできない？？ってことも

動画作ったので見てみてくださいね。（コピーは１秒で終わります。）

まとめ

フォントオーサムは使えるようになるとかわいいデザインなので重宝します。

今回は超入門編として紹介しています。色々サイトの中を見ていると楽しいですよ
　→これもフォントオーサムのネコです。

<i class="fas fa-cat fa-spin fa-2x"></i>

このコードでネコが回ります

関連記事[英語deIT] Bootstrap４（ブートストラップ）超入門編