Angular8でFont AwesomeをAngular Materialに統合

12154 ワード
Angular angularMaterial FontAwesome icon Angular8 Angular テキストリンク

Angular8でFont AwesomeをAngular Materialに統合

by Shuichi Ohtsu

ビデオ解説(日本語）
https://youtu.be/EOm-kaKMm3U

ビデオ解説(英語）
https://youtu.be/R5p4qe--usE

フルソース・コード
https://github.com/Ohtsu/ng8-mat-font-awesome

Angular MaterialにFont Awesomeを統合

Angularでは、Angular Materialを利用することが多いと思います。

しかしAngular Materialでは、mat-iconを利用することができますが、残念ながらその種類は多いとは言えません。そこで、Angular Materialを利用しつつ、Font Awesomeも利用する方法を考えます。

以前、Angular7でFont AwesomeをAngular Materialに統合https://qiita.com/SOhtsu/items/77ffb011833264d452a7をご紹介いたしましたが、今回Angular8が公開されたため、同様の設定で試したところ、エラーが発生することがわかりました。

そこで今回は、Angular8におけるFont Awesomeの利用方法をご紹介いたします。

Angular8で新規プロジェクトを作成

まず、Angular8で新規プロジェクトを作成します。

ここでは、

ng new ng8MatFontAwesome と入力します。

ng8MatFontAwesomeはプロジェクト名であり、その名前は任意です。

このプロセスには、若干時間を要します。

Visual Studio Codeの起動

次に作成されたプロジェクト・ディレクトリに移動した後、code .と入力して、Visual Studio Codeを開きます。

次に、Ctrl + '@'キーを押し、Visual Studio Code内でターミナル・ウインドウを開きます。

Angular Materialのインストール

まず、Angular8にAngular Materialをインストールします。

ターミナル・ウィンドウで、

ng add @angular/material

と入力します。

すると、組み込みのテーマの選択が求められますので、ここではデフォルトのindigo-pinkを選択しておきます。

次にHammerJSをインストールするか否かの問いでは、Yesを選択します。

次に、アニメーションを利用するか否かでも、Yesを選択します。

するとインストールが開始されます。

Font Awesomeのインストール

次に、Font Awesomeをnpmでインストールします。

npm i @fortawesome/fontawesome-free

と入力します。

スペルに注意してください。@の次の文字は、

fontawesome

ではなく

fortawesome

です。

angular.jsonにFont Awesomeをインポート

次に、プロジェクト・ルート・ディレクトリの中のangular.jsonファイルを開き、インポート文を挿入します。

"./node_modules/@fortawesome/fontawesome-free/css/all.min.css",

を以下のように追加します。


 "projects": {
    "ng8MatFontAwesome": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ng8MatFontAwesome",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/@fortawesome/fontawesome-free/css/all.min.css",
              "src/styles.scss"

ローカルサーバの起動の確認

ここで一旦ローカルサーバの起動を確認します。

ターミナル・ウィンドウで

ng s -oと入力します。

ブラウザは自動的に開きます。

ＯＫです。

app.module.tsの修正

Angular Materialのボタンなどを利用するためには、Angular Materialのモジュールをインポートしておく必要があります。

app.module.tsファイルを開き、ここで利用するMatIconModuleとMatButtonModuleをインポートします。

HTMLファイルの編集

次に、HTMLファイルの編集を行います。

src/app内のapp.component.htmlファイルを開きます。このファイルはデフォルトのトップページを定義しています。

まず、mat-buttonでボタンの設定を行います。そして、この中にFont Awesomeのアイコンを挿入します。

その方法は、mat-iconの設定の中に、Font AwesomeのfontsetとfontIconを設定するだけです。

ここではGoogleのアイコンを設定しました。

Googleアイコンの表示

次にローカルサーバを起動し該当のページを表示してみます。

Googleのアイコンが表示されています。

Twitterアイコンの表示

次に、Twitterのアイコンを表示してみます。

VS Codeに戻り、再びHTMLを編集していきます。

Googleのものをコピーして、Twitter用に変更します。

確認したフォントアイコン名に変更します。

ブラウザで確認します。

ＯＫです。

Facebookアイコンの表示

同様にFacebookのアイコンを表示します。

その前に、そのアイコンのフォントセットとアイコン名を確認しておく必要があります。

まず、Font Awesomeのサイトを開きます。

そのＵＲＬは、

です。

Font AwesomeのサイトでFacebookで検索してみます。

この検索ボックスで、facebookと入力します。

この検索結果のアイコンから利用したいアイコンを選び、クリックします。

するとHTML文が表示されますので、その部分をクリックし、クリップボードにコピーします。

VS Codeに戻り、再びHTMLを編集していきます。

Twitter用のものをコピーして、Facebook用に変更します。

次に表示色を変更します。

ブラウザで確認します。

GitHubアイコンの表示

同様にGitHubのアイコンを表示します。

VS Codeに戻り、再びHTMLを編集していきます。

Facebook用のものをコピーして、GitHub用に変更します。

次に表示色を変更します。

ブラウザで確認してみます。

ＯＫです。

最後にデフォルト・ページの不要な表示部分をコメントアウトしておきます。

ブラウザで確認してみます。

ＯＫです。

Source File

Reference