Angular でFont Awesome を使ってみる

Font Awesome

2018.05.28

Angular でFont Awesome を使ってみる

Font Awesomeは、アイコンを文字として扱うことを可能にしたツールです。

簡単におしゃれなアイコンを表示することができます。

Font AwesomeのCDNです。

現時点（2018/05/28）では、以下を読み込むのが最新です。

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

Angular5 で上記をヘッダ部に記述します。

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Apps</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

これでボタンなどをアイコンに変更することができます。いくつかアイコンの例をapp.component.htmlに書いてみます。

app.component.html

<button type="button">
<i class="fa fa-phone"></i>
</button>
<button type="button">
<i class="fa fa-bars"></i>
</button>
<button type="button">
<i class="fa fa-chevron-left"></i>
</button>
<button type="button">
<i class="fa fa-chevron-right"></i>
</button>

結果は以下のように表示されます。