Freecodecamp: Ganti ikon Ionic dengan Font Awesome yang setara dan hapus Ionic sebagai ketergantungan

@QuincyLarson Saya bisa mencoba yang ini!
Meskipun kita dapat menambahkan svg alih-alih ikon font, dan menghapus font mengagumkan sebagai ketergantungan juga.

kita bisa menambahkan svg daripada ikon font

Apakah maksud Anda kami membuat dan memelihara aset tersebut?

ya, sekarang kami melakukannya untuk gambar D3.js,
Saya pikir kita bisa mendapatkan svg di bawah lisensi CC dari berbagai situs atau bahkan hak cipta gratis.
Dan banyak orang menyarankan bahwa seseorang tidak boleh menggunakan font Ikon melainkan harus menggunakan svg dari perspektif aksesibilitas (seperti bootstrap 4 adalah menjatuhkan ikon dan pindah ke svg).

FontAwesome 5 juga akan menawarkan semua ikon SVG, itu adalah penghematan biaya yang sangat besar yang membuat dan memelihara set ikon sendiri.

Dan bonus besar adalah, mereka memiliki semua ikon termasuk ikon kami fa-free-code-camp mulai dari 4.7.0

Dan seperti yang saya katakan ini akan datang secara gratis (sebagai SVG) ke versi mayor berikutnya, dengan kompatibilitas backword.

Untuk saat ini saya percaya kita harus fokus sederhana pada masalah perpindahan dari ikon ionik ke font-awesome yang sudah kita miliki sebagai ketergantungan.

@BhaveshSGupta Saya setuju dengan @raisedadead bahwa kita sebaiknya menggunakan Font Awesome yang merupakan pustaka yang sangat baik. Kami tidak perlu menemukan kembali roda.

Kami akan sangat senang membantu Anda dalam hal ini. Apakah Anda tertarik untuk mengerjakan ini? Jika demikian, dapatkah Anda memberi kami pembaruan status rutin sehingga kami dapat mengetahui bagaimana perkembangannya?

@QuincyLarson Tentu Biar saya lihat malam ini.

hai @QuincyLarson , @raisedadead
Ini semua adalah ikon ikon Ionic yang dapat saya temukan, saya telah menandai ikon font mengagumkan yang setara. Jika ada yang perlu diubah, beri tahu saya.

• [] .ion-android-hand ke .fa-hand-paper-o (email-signin.jade)
• [] .ion-person-add to fa-user-plus (email-signup.jade)
• [] .ion-close-circle ke .fa-times-circle (update-email.jade, flash.jade, flyer.jade)
• [] .ion-social-html5 hingga .fa-html5 (home.jade)
• [] .ion-social-css3 ke .fa-css3 (home.jade)
• [] .ion-social-github ke .fa-github (home.jade)
• [] .ion-android-globe ke .fa-globe (pmi-acp-agile-project-manager.jade)
• [] .ion-card ke .fa-credit-card (pmi-acp-agile-project-manager.jade)
• [] .ion-android-calendar ke .fa-calendar (pmi-acp-agile-project-manager.jade)
• [] .ion-ios-box ke .fa-archive (pmi-acp-agile-project-manager.jade)
• [] .ion-university ke .fa-graduation-cap (pmi-acp-agile-project-manager.jade)
• [] .ion-ios-list ke .fa-list-alt (pmi-acp-agile-project-manager.jade)
• [] .ion-ios-people to .fa-users (pmi-acp-agile-project-manager.jade)

- [] .ion-settings ke .fa-wrench (pmi-acp-agile-project-manager.jade)

Tidak dapat menemukan ikon apa pun untuk berikut ini.
.ion-social-javascript (home.jade)
.ion-social-nodejs (home.jade)

Penambahan ikon NodeJS ke pustaka FA ditunda sejak Des 2013, Masalah # 2584 . Saya tidak bisa menemukan masalah untuk ikon JS. Saya melanjutkan dan mengambil kebebasan untuk mengubah dua ikon di atas menjadi font ikon menggunakan Fontello dan Ion Icon SVG.

Saya berpendapat bahwa meskipun kita beralih ke ikon FA sepenuhnya, akan ada kebutuhan untuk ikon khusus dan karenanya kita harus mempertahankan font ikon FCC khusus.

Ikon SVGs.zip

fontello-7ce4e099.zip

@BhaveshSGupta daftar luar biasa! Ya - apakah Anda punya waktu untuk melakukan pergantian pemain ini sendiri sehingga Anda bisa mendapatkan kredit untuk ini di riwayat Git?

@iHarshad Ya - Saya setuju bahwa kita harus menyertakan gambar SVG kita sendiri yang tidak memiliki Font Awesome. Ini akan jauh lebih kecil daripada menyertakan Ionic hanya untuk beberapa ikon.

@QuincyLarson yakin mengapa saya tidak ingin melakukan itu,
dan jika kita ingin menggunakan kit khusus kita dapat menggunakan sesuatu seperti icomoon.io di mana kita dapat menambahkan font font mengagumkan dan font kustom dan membuat satu kit hanya dengan ikon yang diperlukan

@BhaveshSGupta Ya, kita bisa mencobanya. Saya juga bisa mengambil beberapa file SVG tertentu yang kami butuhkan dan menempatkannya di S3. Mereka tidak terlalu besar - masing-masing hanya beberapa kilobyte :)

@QuincyLarson Saya rasa @BhaveshSGupta telah membuat saran yang bagus di sini.

Alih-alih memuat seluruh pustaka Font Awesome, kita dapat menggunakan sesuatu seperti Fontello untuk memilih ikon dari mana pun kita membutuhkan dan mengunggah file yang dihasilkan ke S3. Saya telah menggunakannya di beberapa proyek saya dan ini adalah proses yang sangat sederhana.

@ dakshshah96 OK - tetapi jika saya mengerti dengan benar, saya pikir kita akan tetap ingin memuat seluruh pustaka Font Awesome karena @BerkeleyTrue sedang membangun editor seperti JSBin, dan kita ingin para pekemah dapat menggunakan Font Awesome di sana.

Yang terhormat,

Tunggu kontributor saya dari typodeart tujuh taman.

Salam
Pada 22 Jun 2017 06.02, "Quincy Larson" [email protected] menulis:

@ dakshshah96 https://github.com/dakshshah96 OK - tapi jika saya mengerti
dengan benar, saya pikir kita ingin memuat seluruh pustaka Font Awesome
toh karena @BerkeleyTrue https://github.com/berkeleytrue adalah
membangun editor seperti JSBin, dan kami ingin para pekemah dapat menggunakan Font
Luar biasa di sana.

-
Anda menerima ini karena Anda berlangganan utas ini.
Balas email ini secara langsung, lihat di GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310217649 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/ALc8XLcX7m38iuBq7htBigFEqOI5lFR6ks5sGZLggaJpZM4MWGCb
.

@QuincyLarson Begitu , maka kita perlu Font Awesome.

Namun, ada alternatif lain. Mungkin kita bisa membiarkan pekemah memasukkan tag script alih-alih menyertakan Font Awesome di seluruh situs meskipun itu hanya diperlukan pada editor yang sedang dibuat?

Di icomoon kita dapat menambahkan seluruh font mengagumkan bersama dengan ikon kustom yang saya miliki
melakukan ini ke banyak proyek, tidak hanya font yang mengagumkan tetapi ada beberapa yang gratis
kit.

Pada Kamis 22 Jun 2017, 3:38 Daksh Shah, [email protected] menulis:

@QuincyLarson https://github.com/quincylarson Begitu , maka kita akan membutuhkannya
Font Luar Biasa.

Namun, ada alternatif lain. Mungkin kita bisa membiarkan pekemah memasukkan file
tag skrip alih-alih menyertakan Font Awesome di seluruh situs meskipun itu
dibutuhkan hanya pada editor yang sedang dibangun?

-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310218975 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/AEA75e44KO5ivCcTCHyHEFTNu9LfGlN7ks5sGZQ8gaJpZM4MWGCb
.

@BhaveshSGupta akankah itu memengaruhi sintaks yang digunakan para berkemah untuk menambahkan ikon Font Awesome ke tantangan dan proyek pengkodean mereka di freeCodeCamp?

@QuincyLarson Akan ada perubahan kecil daripada fa-search, mereka perlu menggunakan icon-search. Saya perlu melihat apakah ada cara kita dapat menghindari ini, sementara itu Anda dapat melihat icomoon.io jika Anda punya waktu luang

font-awesome baru saja mengumumkan bahwa mereka dalam versi alfa, dan harus dalam versi beta publik bulan depan di Kickstarter mereka.

Mereka akan merilis kerangka SVG sebagai OSS untuk semua orang, untuk digunakan sebagai ikon khusus.

Kami tidak memerlukan pustaka atau dependensi tambahan kecuali untuk FA.

@raisedadead terima kasih atas perhatiannya. @BhaveshSGupta Karena kita sudah menggunakan Font Awesome untuk semua ikon kita (atau setidaknya, kita akan segera menyingkirkan ikon Ionic yang tersisa) Saya sarankan kita menunggu Font Awesome untuk merilisnya, dan kita bisa menggunakan SVG statis file seperlunya untuk saat ini (saya dapat menyimpannya di folder S3)

@QuincyLarson Saya akan memperbarui ikonik sesuai ini , Meskipun saya memerlukan alternatif untuk .ion-social-javascript (home.jade)
.ion-social-nodejs (home.jade)

@BhaveshSGupta Luar logo JS di SVG (menurut saya kami ingin memusatkannya dan membuatnya lebih besar - tahukah Anda cara melakukannya?

Ini logo Node - Anda harus mengunduhnya dan membuatnya monokrom: https://seeklogo.com/vector-logo/273749/node-js

Tolong beri tahu saya jika saya dapat membantu lebih lanjut dengan ini :)

@BhaveshSGupta di sini adalah logo di atas yang diedit sebagai @QuincyLarson disebutkan. Saya menggunakan VectorPaint untuk membuat perubahan dan menghapus metadata merek.

Logo JS SVG diedit - https://goo.gl/xP72mF
Logo SVG Node yang Diedit - https://goo.gl/dN4i2M

@iHarshad Tampak luar biasa, @QuincyLarson Saya menyimpannya di folder publik / gambar seperti yang sekarang

@BhaveshSGupta @iHarshad Akan sangat bagus jika Anda dapat menambahkan ini ke repo freeCodeCamp / assets juga melalui PR.

@raisedadead Tentu, akan menambahkan ini di repo aset juga.

@iHarshad logo baru Anda tampak hebat! Terima kasih telah membuat ini.

Anda dapat mempertimbangkan untuk membuka permintaan tarik ke Font Awesome dengan ini. Mereka mungkin tidak menerimanya, tetapi mungkin mempercepat pekerjaan mereka untuk mendapatkan versi standar dari ikon-ikon ini ke dalam perpustakaan mereka :)

@raisedadead @BhaveshSGupta @iHarshad Tahukah Anda apakah kami memang dapat beralih ke menarik file SVG? Saya pikir itu akan jauh lebih cepat daripada memuat pustaka Font Awesome.

Kami ingin mendapatkan kecepatan pemuatan halaman awal ini lebih cepat , dan saya pikir hanya memuat SVG yang kami butuhkan dapat membantu kami melakukannya :)

Anda dapat mempertimbangkan untuk membuka permintaan tarik ke Font Awesome dengan ini.

Di FA 4 mereka tidak menerima PR apa pun untuk saat ini untuk permintaan ikon. Jika mau, Anda memerlukan akses ke repo FA 5. Sayangnya ini pribadi dalam versi beta.

Tahukah Anda apakah kami memang dapat beralih ke menarik file SVG? Saya pikir itu akan jauh lebih cepat daripada memuat pustaka Font Awesome.

Apakah kita hanya membicarakan beranda?
Berikut adalah laporan mercusuar dengan saran untuk perbaikan.

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

Seperti yang ditunjukkan @raisedadead tentang masalah penggunaan FA4 dan FA5, kami dapat menggunakan lembar sprite gambar ( referensi ) untuk ikon khusus kami yang tidak didukung oleh FA.

Apa yang kalian pikirkan?

Kecepatan halaman tidak ada hubungannya dengan FA dan CSS yang tidak dioptimalkan secara keseluruhan. @QuincyLarson Saya pikir kita sebaiknya melacaknya di utas terpisah.

@raiseded setuju. Bisakah Anda membuat masalah terpisah yang menjelaskan masalah ini - sebaiknya dengan daftar periksa hal-hal yang dapat kami lakukan untuk mengoptimalkan CSS kami?

@QuincyLarson yakin, saya akan segera setelah kami memiliki tata letak baru dan mengonsolidasi.

Saya menutup masalah ini karena kesalahan - ini masih sesuatu yang ingin kami capai secara aktif. Memperbarui label dengan tepat.

@BhaveshSGupta Apakah Anda masih tertarik membantu kami memperbarui ikon ini?

@QuincyLarson ya saya ikut.

@BhaveshSGupta Luar

@QuincyLarson akhirnya di sini kami akan mengganti sesuai ini dan akan menggunakan gambar svg yang disediakan oleh @iHarshad sesuai ini dan juga akan menambahkan gambar ini ke freeCodeCamp / assets sesuai @raisedadead

@BhaveshSGupta Itu benar sekali!

@BhaveshSGupta Ya, tepatnya.

Dengan senang hati saya laporkan bahwa berkat @raisedadead , freeCodeCamp sekarang memiliki lisensi untuk menggunakan Font Awesome 5.0! Terima kasih sobat!

Saya belum melihat ini terlihat secara publik, tapi berikut adalah 4.7 ikon: http://fontawesome.io/icons/

@BhaveshSGupta mengirimi saya pesan di Gitter dan saya akan memberi Anda file ikon 5.0 (karena saya pikir Anda berencana untuk mengekspor yang kami inginkan ke kumpulan file terpisah, jadi kami dapat membuat CDN kami sendiri untuk mereka).

@QuincyLarson Hai, saya telah mengirimi Anda SMS lewat gitter, berikan file itu saat Anda bebas

@QuincyLarson tentu saja senang dapat membantu itu!

@BhaveshSGupta terima kasih telah membantu kami dalam upaya ini.
Juga, tidak perlu dikatakan lagi, bahwa kami akan menambahkan versi produksi yang diperkecil dari ikon di S3, jadi pastikan Anda tidak memasukkan file sumber (yang BUKAN untuk distribusi dan pengembangan saja).

Hubungi saya untuk bantuan apa pun.

Hai @BhaveshSGupta, bisakah Anda memberi kami pembaruan singkat tentang

@QuincyLarson Untuk saat ini kita hanya dapat menghilangkan ketergantungan ionik dengan membuat perubahan yang tercantum di sini dan menggunakan gambar yang tercantum di sini . Untuk ini, jika Anda dapat meng-host file ini di S3 dan memberi saya tautan yang sama, tidak perlu banyak waktu untuk melakukan perubahan lainnya.

@QuincyLarson dan lainnya yang tertarik

Dengan senang hati mengumumkan bahwa Font Awesome kini telah merilis versi 5.0.0
Ia memiliki semua ikon yang kita butuhkan.

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

Jadi, kami tidak memerlukan pemeliharaan ikon (SVG, dll) di bagian akhir kami.

Oleh karena itu, migrasi sama baiknya dengan menambahkan deps pada paket baru seperti yang didokumentasikan pada dokumen resmi di atas.

Saya telah memulai beberapa pekerjaan di sini di garpu saya. Jangan ragu untuk mendorongnya melalui permintaan tarik.

staging...raisedadead:feat/upgrade-fontawesome

@raisedadead Luar biasa! Apakah Anda yakin itu memiliki semua yang kami butuhkan? Misalnya, saya tidak dapat menemukan ikon D3 di sana, dan kami menggunakannya untuk halaman arahan kami. Kami mungkin harus menyimpan beberapa file SVG, tetapi saya yakin kami dapat menyingkirkan pustaka ikon Ionic yang berlebihan :)

Saya telah membuka permintaan resmi

Untuk saat ini kami dapat menggunakan logo resmi (tersedia sebagai SVG)
https://github.com/d3/d3-logo

@raisedadead OK - itu akan bagus. Perhatikan bahwa butuh lebih dari satu tahun dan ratusan +1 pada masalah GitHub sebelum tim Font Awesome menambahkan logo freeCodeCamp, jadi mungkin butuh waktu lama.

Kami saat ini sudah menggunakan logo D3 resmi di halaman arahan jadi kami tidak perlu mengubah apa pun. Saya baru saja menunjukkan bahwa kita masih membutuhkan beberapa file SVG selain ikon yang disediakan oleh Font Awesome.

Saya yakin Ionic masih merupakan ketergantungan. Adakah yang tertarik untuk membantu menghapus pustaka ikon ini dari repo dan mengganti ikon dengan Font Awesome yang setara?

Hai @QuincyLarson , saya ingin melihat ini!

Oke, sepertinya @bhaveshsgupta dan @raisedadead sudah melakukan sebagian besar pekerjaan berat.

Kami masih menggunakan Font Awesome v4.7. Akan sangat bagus untuk memperbarui ke 5.0; seperti disebutkan sebelumnya, kami sudah memiliki lisensi, dan versi 5 menyertakan ikon JS dan Node yang 4 tidak dan akan menghapus persyaratan untuk mempertahankan SVG tersebut.

Namun, ada perubahan yang mengganggu dalam peningkatan dari 4 menjadi 5. Kami dapat menggunakan shim peningkatan resmi sebagai perbaikan cepat, tetapi ini hanya menghemat sedikit usaha sampai kami meningkatkan "dengan benar" di masa mendatang.

Haruskah saya mengangkat masalah baru untuk peningkatan Font Awesome? Ada beberapa opsi yang dapat dipilih untuk mengimplementasikan versi 5 dan akan bagus jika beberapa masukan yang terbaik untuk kebutuhan FCC. Ini mungkin pemblokir untuk menghapus Ionic tetapi menurut saya, meningkatkan FA akan menjadi hal yang lebih baik untuk ditangani terlebih dahulu.

Hai @ppppp

Sekadar info, kami ingin mengganti dependensi dalam repo ini dan repo belajar yang merupakan platform pembelajaran kami.

Anda dapat terhubung dengan saya jika Anda membutuhkan bantuan.

Seorang PR akan menjadi tempat yang baik untuk mendiskusikan sisi teknis dari berbagai hal dan perubahan.

Satu-satunya hal yang hilang adalah logo D3. Tetapi itu juga tersedia sebagai SVG di repo aset D3 resmi.