, , , ,

ThemifyエディターとFont Awesomeのインストールの関係

⋅

いつもお読みくださりありがとうございます。Yukikoです。

Themify BuilderはFont Awesomeが簡単に使えます。

今までコーディングして来た苦労は何なのか・・と思うぐらいです。

ぜひThemify Builderをお試し頂き、ラクして下さいね。

 

Font Awesome 公式サイト

　FontAwesomeの正体はアイコン

この度、FontAwesomeが便利との情報を得まして、初めて使ってみました。

この名前から想像するに、Font指定や変更が出来るのかと思いきや・・・

使い道は、単なるアイコン！

単なるというと語弊があるのかもしれませんので言い換えると、文字の代役をしてくれる素晴らしいアイコンなのです。

使い方

とってもシンプルです。公式サイトでダウンロードしてきます。

Font Awesome 無料ダウンロード

” Save Font Awesome Yourself “

というページをクリックしてダウンロードします。

フォルダに配置して、ソースコードを書けばOKです。

これは少し上級者向きかもしれません。

初心者の方はコピペの方が短時間でできるのでいいかと思います。

Font Awesomeは１億以上のサイトで使われているとのこと。

リンクを貼り付ける方法

ダウンロードはせず、公式サイトから好きなアイコンを選んで来て、

① ヘッダーに公式サイトで取得したリンクを貼ります。

② 好きなアイコンを選んで来てコピペしてファイルとリンクします。

 

倍数の書き方

その数、なんと数百個もある極小アイコンは、まるでイラストのようにも使えます。

つまり、小さいアイコンと大きなアイコンを見比べると大きなアイコンはまるでイラストの様に見えます。

大きさを変える為には、クラスに以下を追加すればOKです。（下記参照）

 

1.333…倍 　：　fa-lg
2倍　： 　fa-2x
3倍　： 　fa-3x
4倍　： 　fa-4x
5倍　： 　fa-5x

 

サンプルページ
サンプルページ(大きくした場合）

ソースの配置例（ダウンロード無しの場合）

<!-- FontAwesome CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

<div class="container">
 <div class="row">
   <div class="col bg-primary">1 folder-open <i class="fa fa-folder-open-o" aria-hidden="true"></i>
   </div>
   <div class="col bg-secondary">2 motorcycle <i class="fa fa-motorcycle" aria-hidden="true"></i>
   </div>
   <div class="col bg-info">3 graduation-cap <i class="fa fa-graduation-cap" aria-hidden="true"></i>
   </div>
  <div class="col bg-danger">4 plus-circle <i class="fa fa-plus-circle" aria-hidden="true"></i>
  </div>
 </div>
</div>

 

使い方はほんとに色々あるので、最初戸惑いますが、書いてみると結構便利です。

重ねて表示させたり、スピンさせたりする事も出来ます。

ソーシャルアイコン ： ブランドアイコン もなんと沢山あります！

有名なWEB関連のブランド会社のアイコンは全部揃っている様であります。

 

アレンジは上級者向けかもしれませんが、知っておく事で、活躍の幅が増えることは間違いなしですね！


参考： https://saruwakakun.com/html-css/basic/font-awesome

 

最後までお読みくださりありがとうございました。

Yukiko

フリーランスのWebDeveloper | フロントエンドエンジニア、元グラフィックデザイナーです。

関連する記事

Liked Liked
No Comments