問題タブ [font-awesome-5]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - angular-cli プロジェクトに @fortawesome/fontawesome を含める
Angular > 5.0.0 を実行している angular-cli プロジェクト (1.6.0) に font awesome 5 を含めようとしています。
私は（説明したように）使用しました：
パッケージを正常に取得します。ここで、angular-cli にパッケージを含めたいと思います。私app.component.tsはやろうとしました（https://www.npmjs.com/package/@fortawesome/fontawesomeで説明されているように）：
しかし、タイプスクリプトのスローとエラー:
Font Awesome 4 では、.css ファイルを「styles」配列に含めました。しかし、Font Awesome 5 には、すべての css を含む css ファイルがありません。これは単なる .js ファイルの集まりです。
Angular CLI プロジェクトに Font Awesome 5 を適切に含めるにはどうすればよいですか? (たとえば<i class="fal fal-user"></i>、マークアップで使用できるようにしたい)
javascript - JSとイベントバブリングを使用してFontAwesomeアイコンをターゲットにする最良の方法は何ですか?
新しい FontAwesome 5 バージョンでは、「SVG with JS」を使用している間、アイコンが非常にきれいに見えます。その副作用は、イベントのバブリング/委任を使用してターゲットを絞る確実な方法を見つけるのが非常に難しいことです。それをクリックしてpathノードを取得する場合もあれば、ノードを取得する場合もありsvgます。
タグsvg内にネストする方法を使用してみましたが、機能しません。彼らはここでAuto-Replace-SVG-Nstiを説明しようとしていますが... 私は何の進展もありません。
iだから私は先に進み、別のものに置き換えられたオリジナルを手動でネストしましたi。<i><i class="far fa-comment-alt"></i></i>. をチェックするevent console.log(e.target.parentElement)と、正しい が得られる場合もあれば、 が得られる場合もあり<i>ます<svg>。これにより、まだヒットしていることがわかりますpathand <svg>。
正しい要素を正確にターゲットにすることができないため、非常に予測できない結果が得られます。このページのすべてのコンテンツは、DB からの PHP クエリまたは DB からの AJAX によって動的に生成されます。この問題に対処するためだけに、同じイベントに対して 2 つの異なるハンドラーを作成する必要がありますか?
バージョンだけでもいいのですが、Web Fonts with CSSバージョンと比べるとJSアイコンがかなり粗いので、JSできればバージョンを使いたいと思います。
ノート
ページがロードされた後に要素が生成されるため、この状況ではイベントバブリングを使用する必要があります。