LoginSignup
0

More than 3 years have passed since last update.

Angular8におけるBootstrap4とFontAwesomeの統合方法

Last updated at Posted at 2019-07-05

Angular8におけるBootstrap4とFontAwesomeの統合方法

by Shuichi Ohtsu

フルソースコード
https://github.com/Ohtsu/ng8-bootstrap4-fontawesome

ビデオ解説(日本語)
https://youtu.be/Zwjoi1ngFlM

ビデオ解説(英語)
https://youtu.be/HB-xdetdQA0


プロジェクトの作成方法について

ここでは、Angular8においてBootstrap4とFontAwesomeを統合する方法についてご紹介します。

なお、プロジェクト作成の段階からのBootstrap4の設定方法につきましては、すでに、Angular8におけるBootstrap4環境の設定方法https://youtu.be/gFxuSi4IZjMを公開しておりますので、そちらをご覧ください。

今回は、そうした設定済みプロジェクトをGitHubからダウンロードし、さらにそれにFontAwesomeを組み込む形で進めていきます。

プロジェクトの内容については、そのフルソースコードをご覧ください。


Bootstrap4を組み込んだプロジェクト・ソースのGitHubからのダウンロード

まず、GitHubからBootstrap4を組み込んだプロジェクトのフルソースをダウンロードします。

そのURLは、

https://github.com/Ohtsu/ng8-bootstrap4-initial

です。

ページが表示されましたら、右側の緑のClone or downloadボタンをクリックします。

するとダウンロード用のアドレスが表示されますので、右側のコピーアイコンをクリックし、そのアドレスをコピーしておきます。

プロジェクトの生成

コマンド・プロンプトを開き、適当なディレクトリに移動した後、そのディレクトリで、git cloneに続けて、コピーしたアドレスを貼り付けます。

git clone https://github.com/Ohtsu/ng8-bootstrap4-initial.git

と入力します。

するとダウンロードが開始されます。

Visual Studio Codeの起動

次に、生成されたプロジェクトのディレクトリに入り、

cd ng8-bootstrap4-initial

Visual Studio Codeを起動します。

code .

と入力します。

VSCodeが起動しましたら、

ctrl+@キーを押し、ターミナル・ウィンドウを開きます。

そして、

npm i

と入力し、プロジェクトに必要なライブラリをインストールします。

プロジェクトの起動の確認

次に、プロジェクトが起動できるかどうかを確認します。

ng s -o

と入力します。

ブラウザが自動的に開き、ドロップダウン及びドロップアップが表示されます。

OKです。

プロジェクト名の変更

次に、プロジェクトの内容を変更していきます。

まず、プロジェクト名を変更します。

package.jsonファイルを開くと、プロジェクト名がng8-bootstrap4-initialになっているのがわかります。これをng8-bootstrap4-fontawesomeに変更します。

左の検索アイコンをクリックし、プロジェクト全体のソースを対象として置換を行います。

次に、パスカルケース、すなわち-ではなく大文字で区切っているものも存在しますので、Ng8Bootstrap4InitialNg8Bootstrap4Fontawesomeに変更しておきます。

次に

npm i

と入力し、再度ライブラリをインストールします。

また、プロジェクトが起動できるかもチェックします。

ng s -o

と入力します。

ブラウザが自動的に開き、ドロップダウン及びドロップアップが表示されます。

OKです。

FontAwesomeのインストール

次に、ctrl+cで一旦ローカルサーバを停止させ、FontAwesomeをインストールします。

ターミナル・ウィンドウで、npm i @fortawesome/fontawesome-freeと入力します。

@の次の文字列は、fontawesomeではなく、fortawesomeであることに注意してください。

次に、package.jsonファイルを開き、インストールされていることを確認します。また、@fortawesome/fontawesome-freeの文字列もコピーしておきます。

次に、angular.jsonファイルを開き、project - architect - build - stylesの項にインストールしたFontAwesomeを追加します。

具体的には、

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

の一行を追加します。

Bootstrap4のボタンを追加

次にng-bootstrapのサイトを開き、ボタンのサンプル・プログラムを参照します。

そのURLは、

https://ng-bootstrap.gitgub.io/#/home

です。

ここで、Demoボタンをクリックし、左側のメニューからButtonsをクリックします。

チェックボックス・ボタンのサンプルが表示されていますので、まずこのボタンをAngular8のプロジェクトに取り込み、そのボタンの中に、FontAwesomeのアイコンを表示させることにします。

まず、右上のCodeボタンをクリックし、そのソースを表示します。

まずHTML文をコピーします。

VSCodeに戻り、src/app内のapp.component.htmlファイルを開きます。

プルダウン及びプルアップ関連の部分をコメントアウトします。

コピーしたHTMLをここに貼り付けます。

ブラウザに戻り、TypeScriptのファイルを開きます。

追加が必要なのは、model部分のみですので、これをコピーします。

VSCodeに戻り、src/app内のapp.component.tsファイルを開きます。

コピーしたmodel部分をここに貼り付けます。

次に、app.module.tsファイルを開き、FormsModuleをインポートしておきます。

チェックボックス・ボタンの表示

ここで、再度ローカルサーバを起動し、チェックボックス・ボタンが表示されるかどうかを確認します。

ng s -o

と入力します。

OKです。

FontAwesomeのアイコンの追加

次に、各ボタンの中にFontAwesomeのアイコンを入れていきます。

VSCodeに戻り、app.component.htmlファイルを開きます。

プルダウン及びプルアップ関連の部分を削除してしまいます。

まず、左のボタンにGoogleのアイコンを入れてみます。

その方法は、簡単です。

ボタンのテキスト部分に、<i class="fab fa-google"></i>を挿入するだけです。

ブラウザで確認します。

OKです。

VSCodeに戻り、次にTwitterとFacebookのアイコンを挿入します。

ブラウザで確認します。

OKです。

次に、leftやmiddleなどの文字列がおかしいので、Googleなどに変更します。

VSCodeに戻り、app.component.tsファイルを開き、modelの定義を変更します。

また、app.component.htmlファイルを開き、該当部分を変更しておきます。

ブラウザで確認します。

OKです。

最後に、ボタンの色も変更しておきます。

VSCodeに戻り、app.component.htmlファイルを開き、ボタンのクラス名を変更し、色を変えます。

ブラウザで確認します。

OKです。

Reference

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0