web-dev-qa-db-ja.com

Ionic 4にFont Awesomeをどのように追加しますか？

Ionic 3プロジェクトにFont Awesomeを含める方法についてのチュートリアルと記事はたくさんありますが、Font AwesomeをIonicに追加する方法を見つけるのに苦労しました= 4プロジェクトです。つまり、Ionic 4プロジェクトでFont Awesomeをどのように追加して使用しますか？

次の tutorial を使用してみましたが、あまり成功していません。私は次の StackOverflow回答 で概説されている手順に従ってみましたが、どちらも機能しませんでした。

ionic-frameworkfont-awesomeionic4
7
Tachyon

次のコマンドを実行します。

npm install --save-dev @fortawesome/fontawesome-free

次に、angular.jsonこれを「スタイル」に追加します：

{
    "input": "node_modules/@fortawesome/fontawesome-free/css/all.css"
}
3
Pedro Cirilo

誰かがFontAwesome PROを扱っている場合に備えて。私は最近FontAwesomeプロのアイコンを購入し、次のように統合しました：

  • fontAwesome webfontsフォルダーをsrc/assets /にコピーします
  • fontAwesome scssフォルダーをsrc/theme /にコピーします

  • assets/webfonts !default;で_variables.scssの$ fa-font-pathを変更します

  • global.scssに追加

    @import './theme/[YourDirectoryfontawesomeScss]/fontawesome.scss';
    @ import './theme/[YourDirectoryfontawesomeScss]/solid.scss';
    @ import './theme/[YourDirectoryfontawesomeScss]/brands.scss';
    @ import './theme/[YourDirectoryfontawesomeScss]/light.scss';
    @ import './theme/[YourDirectoryfontawesomeScss]/regular.scss';

最後に、それらをiタグで使用できます。例えば

<i class="fas fa-stack-overflow"></i>

fa-クラスの詳細はこちら https://fontawesome.com/how-to-use/on-the-web/setup/getting-started

2
ppichier