Freecodecamp: IonicアイコンをFontAwesomeに相当するものに置き換え、依存関係としてIonicを削除します

@QuincyLarsonこれを試すことができます！
フォントアイコンの代わりにsvgを追加し、依存関係として素晴らしいフォントを削除することもできますが。

フォントアイコンの代わりにsvgを追加できます

それらの資産を作成して維持するということですか？

はい、今はD3.jsイメージに対してそれを行います。
さまざまなサイトからCCライセンスの下でsvgを取得したり、無料でコピーしたりできると思います。
そして、多くの人々は、アクセシビリティの観点から、アイコンフォントを使用するのではなく、svgを使用するべきだと提案しています（ブートストラップ4がアイコンをドロップしてsvgに移動するように）。

FontAwesome 5はすべてのSVGアイコンも提供する予定です。これは、アイコンセットを自分で作成して維持することで大幅なコスト削減になります。

そして大きなボーナスは、 fa-free-code-camp時点で4.7.0 fa-free-code-campのアイコンを含むすべてのアイコンがあることです

そして、私が言ったように、これはバックワードの互換性を備えた次のメジャーバージョンに（SVGとして）無料で提供されます。

今のところ、私たちは、イオンアイコンからフォントへの移行の問題に単純に焦点を当てるべきだと信じています-私たちがすでに依存関係として持っている素晴らしいです。

@ BhaveshSGupta @ raisedadeadに同意します。優れたライブラリであるFontAwesomeを使用するだけです。 車輪の再発明をする必要はありません。

これであなたの助けが欲しいです。 これに取り組むことに興味がありますか？ もしそうなら、状況がどのように進んでいるかを知ることができるように、定期的にステータスを更新していただけますか？

@QuincyLarson確かに今夜それを見てみましょう。

ねえ@ QuincyLarson 、@ raisedadead
これらはすべて私が見つけたイオンアイコンアイコンです、私は同等のフォント素晴らしいアイコンをマークしました。 変更が必要な場合はお知らせください。

• [] .ion-android-handから.fa-hand-paper-o（email-signin.jade）
• [] .ion-person-fa-user-plusに追加（email-signup.jade）
• [] .ion-close-circled to .fa-times-circle（update-email.jade、flash.jade、flyer.jade）
• [] .ion-social-html5から.fa-html5（home.jade）
• [] .ion-social-css3から.fa-css3（home.jade）
• [] .ion-social-githubから.fa-github（home.jade）
• [] .ion-android-globeから.fa-globe（pmi-acp-agile-project-managers.jade）
• [] .ion-cardから.fa-credit-card（pmi-acp-agile-project-managers.jade）
• [] .ion-android-calendarから.fa-calendar（pmi-acp-agile-project-managers.jade）
• [] .ion-ios-boxから.fa-archive（pmi-acp-agile-project-managers.jade）
• [] .ion-universityから.fa-graduation-cap（pmi-acp-agile-project-managers.jade）
• [] .ion-ios-listから.fa-list-alt（pmi-acp-agile-project-managers.jade）
• [] .ion-ios-peopleから.fa-users（pmi-acp-agile-project-managers.jade）

-[] .ion-settings to .fa-wrench（pmi-acp-agile-project-managers.jade）

次のアイコンが見つかりませんでした。
.ion-social-javascript（home.jade）
.ion-social-nodejs（home.jade）

NodeJSアイコンのFAライブラリへの追加は、2013年12月のIssue＃2584以降保留中です。 JSアイコンの問題は見つかりませんでした。 私は先に進み、FontelloとIon IconSVGを使用して上記の2つのアイコンをアイコンフォントに自由に変換しました。

FAアイコンに完全に切り替えたとしても、カスタムアイコンが必要になるため、カスタムFCCアイコンフォントを維持する必要があると思います。

アイコンSVGs.zip

fontello-7ce4e099.zip

@BhaveshSGupta優れたリスト！ はい-Gitの履歴でこれを評価できるように、自分でこれらの置換を行う時間はありますか？

@iHarshadはい

@QuincyLarson確かに、私はそれをやりたいと思いませんか、
カスタムキットを使用したい場合は、icomoon.ioのようなものを使用して、素晴らしいフォントとカスタムフォントを追加し、必要なアイコンのみを含む単一のキットを作成できます。

@BhaveshSGuptaはい、試すことができます。 また、必要な特定のSVGファイルをいくつか取得して、S3に配置することもできます。 それらはそれほど大きくはありません-それぞれ数キロバイトです:)

@ QuincyLarson @ BhaveshSGuptaがここで良い提案をしたと思います。

Font Awesomeライブラリ全体をロードする代わりに、 Fontelloのようなものを使用して、必要な場所からアイコンを選択し、生成されたファイルをS3にアップロードすることができます。 私はそれを私のプロジェクトのいくつかで使用しました、そしてそれは非常に単純なプロセスです。

@ dakshshah96 OK -私が正しく理解している場合しかし、私は@BerkeleyTrueがJSBinのようなエディタを構築して、私たちはキャンパーがそこに恐ろしいフォントを使用できるようにしたいと思うので、我々はとにかく全体のフォント恐ろしいライブラリをロードしたいと思います。

拝啓、

7つの庭のtypodeartの私の寄稿者を待ちます。

よろしく
2017年6月22日午前6:02、「QuincyLarson」 [email protected]は次のように書いています。

@ dakshshah96 https://github.com/dakshshah96 OK-でも、理解できれば
正しくは、FontAwesomeライブラリ全体をロードしたいと思います
とにかく@BerkeleyTruehttps ：//github.com/berkeleytrueは
JSBinのようなエディターを構築し、キャンパーがFontを使用できるようにします。
そこに素晴らしい。

—
このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310217649 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ALc8XLcX7m38iuBq7htBigFEqOI5lFR6ks5sGZLggaJpZM4MWGCb
。

@QuincyLarsonなるほど、

ただし、別の方法があります。 構築中のエディターだけで必要な場合でも、サイト全体にFont Awesomeを含める代わりに、キャンパーにスクリプトタグを挿入させることができるでしょうか。

icomoonでは、私が持っているカスタムアイコンと一緒に素晴らしいフォント全体を追加できます
多くのプロジェクトでこれを行うと、フォントが素晴らしいだけでなく、他に無料のものはほとんどありません
キット。

2017年6月22日木曜日午前3時38分DakshShah、 notifications @ github.comは次のように書いています。

@QuincyLarson https://github.com/quincylarsonなるほど、必要になります
FontAwesome。

ただし、別の方法があります。 キャンピングカーに挿入させることができるかもしれません
Font Awesomeをサイト全体に含める代わりに、スクリプトタグ
構築中のエディターだけで必要ですか？

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310218975 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AEA75e44KO5ivCcTCHyHEFTNu9LfGlN7ks5sGZQ8gaJ​​pZM4MWGCb
。

@BhaveshSGuptaは、キャンピングカーがFreeCodeCampのコーディングの課題やプロジェクトにFont Awesomeアイコンを追加するために使用する構文に影響しますか？

@QuincyLarson fa fa-searchの代わりに、icon-searchを使用する必要がある小さな変更があります。 これを回避する方法があるかどうかを確認する必要があります。その間、空き時間があればicomoon.ioをチェックしてください。

font-awesomeは、アルファ版であり、来月までにKickstarterでパブリックベータ版になると発表したばかりです。

彼らは、カスタムアイコンの作成として使用するために、SVGフレームワークをすべての人のためのOSSとしてリリースする予定です。

FAを除いて、追加のライブラリや依存関係は必要ありません。

@raisedadeadヘッズアップをありがとう。 @BhaveshSGuptaすでにすべてのアイコンに

@QuincyLarson私はあたりとして象徴的な更新します。この私が.ion-社会JavaScriptが交互に必要になりますが、（home.jade）
.ion-social-nodejs（home.jade）

@BhaveshSGupta素晴らしい！ これがSVGの

Nodeのロゴは次のとおりです。ダウンロードしてモノクロにする必要があります： //seeklogo.com/vector-logo/273749/node-js

これらについてさらにサポートが必要な場合はお知らせください:)

@BhaveshSGuptaは、 @ QuincyLarsonが言及したように編集された上記のロゴです。 VectorPaintを使用して変更を加え、ブランドメタデータを削除しました。

編集されたJSSVGロゴ-https ：//goo.gl/xP72mF
編集されたノードSVGロゴ-https ：//goo.gl/dN4i2M

@iHarshad素晴らしく見えます、 @ QuincyLarson私は今のところこれらをpublic / imagesフォルダーに保管しています

@BhaveshSGupta @iHarshadPRを介してこれらをfreeCodeCamp / assetsリポジトリにも追加できれば素晴らしいと思います。

@raisedadeadもちろん、これらもアセットリポジトリに追加します。

@iHarshadあなたの新しいロゴは

これらを使用して、FontAwesomeへのプルリクエストを開くことを検討してください。 彼らはそれらを受け入れないかもしれませんが、これらのアイコンの標準バージョンをライブラリに取り込むための作業をスピードアップするかもしれません:)

@raisedadead @BhaveshSGupta @iHarshad SVGファイルのプルに実際に切り替えることができるかどうか知っていますか？ FontAwesomeライブラリをロードするよりもはるかに高速だと思います。

この最初のページの読み込み速度を速くしたいのですが、必要なSVGだけを読み込むことで、そこまでの道のりの大部分を得ることができると思います:)

これらを使用して、FontAwesomeへのプルリクエストを開くことを検討してください。

FA 4では、アイコン要求のPRを今のところ受け入れていません。 必要に応じて、FA5リポジトリにアクセスする必要があります。 残念ながら、ベータ版ではプライベートです。

実際にSVGファイルのプルに切り替えることができるかどうか知っていますか？ FontAwesomeライブラリをロードするよりもはるかに高速だと思います。

ホームページだけの話ですか？
これは、改善のための提案を含む灯台レポートです。

www.freecodecamp.org_2017-07-10_11-03-21.html.zip

@raisedadeadはFA4とFA5を使用しての問題を指摘したように、我々は、画像のスプライトシート（使用することができます参照をFAでサポートされていない私たちのカスタムアイコンのため）。

みなさんはどう思いますか？

ページ速度はFAとは関係がなく、CSS全体としては最適化されていません。 @QuincyLarson別のスレッドで追跡する必要があると思います。

@raisedadeadは同意しました。 これらの問題を説明する別の問題を作成できますか？できればCSSを最適化するためにできることのチェックリストを使用してください。

@QuincyLarson確かに、新しいレイアウトが配置されて統合され次第、

私はこの問題を誤ってクローズしました-これはまだ私たちが積極的に達成したいことです。 それに応じてラベルを更新します。

@BhaveshSGuptaこれらのアイコンの更新を支援することにまだ興味がありますか？

@QuincyLarsonはい私は入っています。

@BhaveshSGupta素晴らしい！ 何かお手伝いできることがあれば教えてください。

@QuincyLarsonは最終的にここでは、あたりとして交換されるだろう。このあたりとして@iHarshadによって提供されているSVG画像使用されるだろう、これをしても@raisedadeadごとにfreeCodeCamp /資産にこの画像を追加します

@BhaveshSGuptaそれは完全に正しいです！

@BhaveshSGuptaはい、その通りです。

@raisedadeadのおかげで、

これらはまだ公開されていませんが、4.7のアイコンは次のとおりです： http ：

@BhaveshSGuptaからGitterでメッセージが送信され、5.0アイコンファイルを提供します（必要なファイルを別のファイルセットにエクスポートして、独自のCDNを作成できるようにする予定があるため）。

@QuincyLarsonねえ、私はあなたにgitterでテキストメッセージを送りました、あなたが自由になったときに私にファイルを渡してください

@QuincyLarsonもちろん、それを支援できることをうれしく思います！

@BhaveshSGuptaこの取り組みにごございます。
また、言うまでもなく、S3にアイコンの縮小版を追加する予定です。そのため、ソースファイル（配布および開発専用ではない）をコミットしないように注意してください。

助けを求めて私を殴ってください。

こんにちは@BhaveshSGuptaこれがどのように進んでいるかについての簡単な更新を教えていただけますか？

@QuincyLarson今のところ、ここにリストされている変更を加え、れている画像を使用することで、イオン依存性を取り除くことができます。 このため、S3でこのファイルをホストし、同じリンクを教えていただければ、他の変更を行うのにそれほど時間はかかりません。

@QuincyLarsonと他の興味のある人

FontAwesomeがバージョン5.0.0をリリースしたことをお知らせします。
必要なすべてのアイコンがあります。

https://fontawesome.com/icons?d=gallery&m=free

したがって、最後にアイコン（SVGなど）を保守する必要はありません。

したがって、移行は、上記の公式ドキュメントに記載されているように、新しいパッケージにdepsを追加するのと同じくらい優れています。

私はここのフォークでいくつかの作業を開始しました。 プルリクエストでお気軽にプッシュしてください。

staging...raisedadead:feat/upgrade-fontawesome

@raisedadead素晴らしい！ 必要なものがすべて揃っていると確信していますか？ たとえば、そこにD3アイコンが見つからなかったので、ランディングページに使用します。 いくつかのSVGファイルを保持する必要があるかもしれませんが、冗長なIonicアイコンライブラリを取り除くことができると確信しています:)

公式リクエストを開始しました

今のところ、公式ロゴ（SVGとして入手可能）を使用できます
https://github.com/d3/d3-logo

@ raisedadeadOK-それは素晴らしいことです。 Font AwesomeチームがfreeCodeCampロゴを追加するまでに、GitHubの問題で1年以上と数百の+1がかかったため、時間がかかる場合があることに注意してください。

現在、ランディングページで公式のD3ロゴを使用しているため、何も変更する必要はありません。 Font Awesomeが提供するアイコンに加えて、まだいくつかのSVGファイルが必要であることを指摘しました。

Ionicはまだ依存関係にあると思います。 このアイコンライブラリをリポジトリから削除し、アイコンをFont Awesomeの同等のものに置き換えることに興味がある人はいますか？

ねえ@QuincyLarson 、これを見てみたい！

さて、 @ bhaveshsguptaと@raisedadeadはすでに大部分のです。

私たちはまだFontAwesomev4.7を使用しています。 5.0にアップデートするのは素晴らしいことです。 前述のように、すでにライセンスがあり、バージョン5にはJSアイコンとノードアイコンが含まれていますが、4には含まれておらず、これらのSVGを維持するための要件が​​削除されます。

ただし、4から5へのアップグレードには重大な変更が含まれています。公式のアップグレードシムをクイックフィックスとして使用できますが、将来「適切に」アップグレードするまで、わずかな労力しか節約できません。

Font Awesomeアップグレードの新しい問題を提起する必要がありますか？ バージョン5を実装するために選択できるオプションがいくつかあり、FCCのニーズに最適な入力があれば便利です。 Ionicを削除するためのブロッカーかもしれませんが、私の考えでは、FAをアップグレードする方が最初に取り組む方が良いでしょう。

こんにちは@hctpscl

ご存知のとおり、このリポジトリ内の依存関係と、学習プラットフォームである学習リポジトリを置き換えたいと思います。

サポートが必要な場合は、私に連絡してください。

PRは、物事や変更の技術的な側面について話し合うのに適した場所です。

欠けているのはD3ロゴだけです。 しかし、それは公式のD3アセットリポジトリのSVGとしても利用できます。