Freecodecamp: استبدل الرموز الأيونية بمثيلاتها من Font Awesome وقم بإزالة Ionic كعنصر تبعية

QuincyLarson يمكنني تجربة هذا!
على الرغم من أنه يمكننا إضافة svg بدلاً من رمز الخط ، وإزالة الخط الرائع باعتباره تبعية أيضًا.

يمكننا إضافة svg بدلاً من رمز الخط

هل تقصد أننا نصنع ونحافظ على تلك الأصول؟

نعم ، نفعل ذلك الآن لصورة D3.js ،
أعتقد أننا قد نحصل على ترخيص CC بموجب ترخيص CC من مواقع مختلفة أو حتى نسخها مجانًا.
ويقترح العديد من الأشخاص أنه لا يجب استخدام خطوط Icon بدلاً من ذلك ، يجب استخدام svg من منظور إمكانية الوصول (مثل bootstrap 4 يسقط الرموز وينتقل إلى svg).

سيقدم FontAwesome 5 أيضًا جميع أيقونات SVG ، وهذا يوفر تكلفة كبيرة من خلال إنشاء وصيانة مجموعة الرموز بأنفسنا.

والمكافأة الكبيرة هي أن لديهم جميع الرموز بما في ذلك رمزنا fa-free-code-camp بدءًا من 4.7.0

وكما قلت ، سيأتي هذا مجانًا (مثل SVG) إلى الإصدار الرئيسي التالي على أي حال ، مع توافق الكلمات الخلفية.

في الوقت الحالي ، أعتقد أننا يجب أن نركز ببساطة على مسألة الانتقال من الرموز الأيونية إلى الخطوط الرائعة التي لدينا بالفعل تبعية.

BhaveshSGupta أتفق مع raisedadead في أنه يجب علينا فقط استخدام Font Awesome وهي مكتبة ممتازة. لسنا بحاجة إلى إعادة اختراع العجلة.

نود مساعدتك في هذا. هل أنت مهتم بالعمل على هذا؟ إذا كان الأمر كذلك ، فهل يمكنك تزويدنا بتحديثات منتظمة عن الحالة حتى نتمكن من معرفة كيف تسير الأمور؟

QuincyLarson بالتأكيد دعني أرى ذلك الليلة.

يا QuincyLarson ،raisedadead
هذه كلها أيقونات أيقونات أيونية يمكن أن أجدها ، لقد قمت بتمييز رموز رائعة للخط المكافئ. إذا كان هناك أي حاجة للتغيير فأعلمني بذلك.

• [] .ion-android-hand to .fa-hand-paper-o (email-signin.jade)
• [] .ion-person-add إلى fa-user-plus (email-signup.jade)
• [] .ion-close -led to .fa-Times-circles (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-global to .fa-global (pmi-acp-agile-project-manager.jade)
• [] .ion-card to .fa-credit-card (pmi-acp-agile-project-manager.jade)
• [] .ion-android-calendar إلى .fa-calendar (pmi-acp-agile-project-manager.jade)
• [] .ion-ios-box إلى .fa-archive (pmi-acp-agile-project-manager.jade)
• [] .ion-university إلى .fa-graduate-cap (pmi-acp-agile-project-manager.jade)
• [] .ion-ios-list to .fa-list-alt (pmi-acp-agile-project-manager.jade)
• [] .ion-ios-people to .fa-users (pmi-acp-agile-project-manager.jade)

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

تعذر العثور على أي رموز لما يلي.
.ion-social-javascript (home.jade)
.ion-social-nodejs (home.jade)

إضافة رمز NodeJS إلى مكتبة FA معلقة منذ ديسمبر 2013 ، الإصدار رقم 2584 . لم أتمكن من العثور على مشكلة في رمز JS. تقدمت وتحولت إلى تحويل الرمزين أعلاه إلى خطوط أيقونات باستخدام Fontello و Ion Icon SVGs.

أعتقد أنه حتى إذا قمنا بالتبديل إلى رموز FA تمامًا ، فستكون هناك حاجة إلى رموز مخصصة ، وبالتالي يجب أن نحافظ على خط رمز FCC مخصص.

رمز SVGs.zip

fontello-7ce4e099.zip

BhaveshSGupta قائمة ممتازة! نعم - هل لديك الوقت لإجراء هذه البدائل بنفسك حتى تتمكن من الحصول على الفضل في ذلك في سجل Git؟

iHarshad نعم - أوافق على أنه ينبغي لنا تضمين صور SVG الخاصة بنا حيث لا يتوفر Font Awesome. سيكون هذا أصغر بكثير من تضمين Ionic لعدد قليل من الرموز.

QuincyLarson متأكد لماذا لا أحب القيام بذلك ،
وإذا أردنا استخدام مجموعة مخصصة ، فيمكننا استخدام شيء مثل icomoon.io حيث يمكننا إضافة خطوط رائعة وخط مخصص وإنشاء مجموعة واحدة مع الرموز المطلوبة فقط

BhaveshSGupta نعم يمكننا تجربة ذلك. يمكنني أيضًا أخذ عدد قليل من ملفات SVG المحددة التي نحتاجها ووضعها في S3. إنها ليست كبيرة جدًا - فقط بضعة كيلوبايت لكل منها :)

QuincyLarson أعتقد أن @ BhaveshSGupta قد قدم اقتراحًا جيدًا هنا.

بدلاً من تحميل مكتبة Font Awesome بالكامل ، يمكننا استخدام شيء مثل Fontello لاختيار الرموز من أي مكان نحتاج إليه وتحميل الملفات التي تم إنشاؤها إلى S3. لقد استخدمت ذلك في العديد من مشاريعي وهي عملية بسيطة للغاية.

@ dakshshah96 حسنًا - ولكن إذا فهمت بشكل صحيح ، أعتقد أننا سنرغب في تحميل مكتبة Font Awesome بأكملها على أي حال لأن

عزيزي السيد،

انتظر مساهمتي في القلب الطباعي لسبعة حدائق.

مع تحياتي
في 22 حزيران (يونيو) 2017 الساعة 6:02 صباحًا ، كتب "Quincy Larson" [email protected] :

@ dakshshah96 https://github.com/dakshshah96 حسنًا - لكن إذا فهمت
بشكل صحيح ، أعتقد أننا سنرغب في تحميل مكتبة Font Awesome بالكامل
على أي حال لأن BerkeleyTrue https://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.

ومع ذلك ، هناك بديل. ربما يمكننا السماح للمخيمين بإدراج علامة نصية بدلاً من تضمين Font Awesome على مستوى الموقع على الرغم من الحاجة إليه فقط في المحرر الذي يتم إنشاؤه؟

في icomoon يمكننا إضافة خط كامل رائع مع الرموز المخصصة لدي
القيام بذلك للعديد من المشاريع ، ليس فقط الخط الرائع ولكن هناك القليل من المشاريع الأخرى المجانية
مجموعات.

في الخميس 22 يونيو 2017 ، الساعة 3:38 صباحًا ، كتب داكش شاه ، [email protected] :

QuincyLarson https://github.com/quincylarson أرى ، ثم سنحتاج
رائع الخط.

ومع ذلك ، هناك بديل. ربما يمكننا السماح للمخيمين بإدخال ملف
علامة البرنامج النصي بدلاً من تضمين Font Awesome على مستوى الموقع على الرغم من أنه
مطلوب فقط على المحرر الذي يتم بناؤه؟

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310218975 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/AEA75e44KO5ivCcTCHyHEFTNu9LfGlN7ks5sGZQ8gaJpZM4MWGCb
.

BhaveshSGupta هل سيؤثر ذلك على البنية التي يستخدمها المعسكرون لإضافة رموز Font Awesome إلى تحديات ومشاريع الترميز الخاصة بهم على freeCodeCamp؟

QuincyLarson سيكون هناك تغيير بسيط بدلاً من fa fa-search الذي يحتاجون إليه لاستخدام البحث عن الرموز. أحتاج إلى معرفة ما إذا كانت هناك طريقة يمكننا من خلالها تجنب ذلك ، وفي الوقت نفسه يمكنك التحقق من icomoon.io إذا كان لديك بعض وقت الفراغ

لقد أعلنت شركة font-awesome للتو أنها في الإصدار الأولي ، ويجب أن تكون في الإصدار التجريبي العام بحلول الشهر المقبل على Kickstarter.

سيقومون بإصدار إطار عمل SVG باعتباره OSS للجميع ، لاستخدامه كإيقونات مخصصة.

لن نحتاج إلى أي مكتبات أو تبعيات إضافية باستثناء FA.

raisedadead شكرا على BhaveshSGupta نظرًا لأننا نستخدم Font Awesome بالفعل لجميع

QuincyLarson سأقوم بتحديث أيقوني وفقًا لهذا ، على الرغم من أنني سأحتاج إلى بدائل لـ .ion-social-javascript (home.jade)
.ion-social-nodejs (home.jade)

تضمين التغريدة إليك شعار JS في SVG (اعتقدت أننا نريد توسيطه وجعله أكبر - هل تعرف كيفية القيام بذلك؟

إليك شعار Node - ستحتاج إلى تنزيله وجعله أحادي اللون: https://seeklogo.com/vector-logo/273749/node-js

يرجى إعلامي إذا كان بإمكاني تقديم أي مساعدة إضافية بشأن هذه :)

BhaveshSGupta هنا الشعارات أعلاه تم تحريرها كما ذكر QuincyLarson . لقد استخدمت VectorPaint لإجراء تغييرات وإزالة البيانات الوصفية للعلامة التجارية.

شعار JS SVG المعدل - https://goo.gl/xP72mF
شعار Node SVG المعدل - https://goo.gl/dN4i2M

iHarshad تبدو رائعة ، QuincyLarson أنا

BhaveshSGuptaiHarshad سيكون أمرا رائعا إذا كان يمكنك إضافة هذه إلى freeCodeCamp / الأصول الريبو وكذلك عن طريق العلاقات العامة.

raisedadead بالتأكيد ، ستضيف هذه في إعادة الأصول أيضًا.

iHarshad تبدو

قد تفكر في فتح طلب سحب إلى Font Awesome باستخدام هذه. قد لا يقبلونها ، ولكن قد يؤدي ذلك إلى تسريع عملهم للحصول على إصدارات قياسية من هذه الرموز في مكتبتهم :)

raisedadeadBhaveshSGuptaiHarshad هل تعرف ما إذا كنا نستطيع التبديل في الواقع أكثر من سحب في ملفات SVG؟ أعتقد أن ذلك سيكون أسرع بكثير من تحميل مكتبة Font Awesome.

نريد زيادة سرعة تحميل الصفحة الأولية هذه ، وأعتقد أن تحميل ملفات SVG التي نحتاجها فقط يمكن أن يؤدي بنا إلى جزء كبير من الطريق إلى هناك :)

قد تفكر في فتح طلب سحب إلى Font Awesome باستخدام هذه.

في FA 4 لا يقبلون أي علاقات عامة في الوقت الحالي لطلبات الأيقونات. إذا كنت ترغب في ذلك ، فستحتاج إلى الوصول إلى FA 5 repo. للأسف خاصته في الإصدار التجريبي.

هل تعرف ما إذا كان يمكننا بالفعل التبديل إلى سحب ملفات SVG؟ أعتقد أن ذلك سيكون أسرع بكثير من تحميل مكتبة Font Awesome.

هل نتحدث عن الصفحة الرئيسية فقط؟
هذا هو تقرير المنارة مع اقتراحات للتحسين.

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

كما أشار raisedadead إلى المشكلات المتعلقة باستخدام FA4 و FA5 ، يمكننا استخدام ورقة الرموز المتحركة ( مرجع ) لرموزنا المخصصة التي لا تدعمها FA.

ماذا عن رأيك؟

لا علاقة لسرعات الصفحة بـ FA بل بـ CSS غير المحسّن ككل. QuincyLarson أعتقد أنه يجب علينا بدلاً من ذلك تتبع ذلك في سلسلة منفصلة.

وافق raisedadead . هل يمكنك إنشاء مشكلة منفصلة تشرح هذه المشكلات - ويفضل أن يكون ذلك مع قائمة مرجعية بالأشياء التي يمكننا القيام بها لتحسين CSS لدينا؟

QuincyLarson بالتأكيد ، سأقوم بمجرد أن يكون لدينا التصميم الجديد في مكانه ودمجها.

لقد أغلقت هذه المشكلة عن طريق الخطأ - لا يزال هذا شيئًا نرغب في تحقيقه. تحديث الملصقات وفقًا لذلك.

BhaveshSGupta هل ما زلت مهتمًا بمساعدتنا في تحديث هذه الرموز؟

QuincyLarson نعم أنا فيها.

تضمين التغريدة اسمحوا لي أن أعرف إذا كان بإمكاني فعل أي شيء للمساعدة.

QuincyLarson أخيرا ها نحن سوف تحل محل وفقا ل هذا وسيتم استخدام الصور SVG التي يتم توفيرها من قبلiHarshad حسب هذا وسيكون أيضا إضافة هذه الصور إلى freeCodeCamp / الموجودات كما فيraisedadead

BhaveshSGupta هذا صحيح تماما!

BhaveshSGupta نعم بالضبط.

يسعدني الإبلاغ عن أنه بفضل raisedadead ، أصبح لدى freeCodeCamp الآن ترخيص لاستخدام Font Awesome 5.0! شكرا يا رجل!

لا أرى هذه الرموز مرئية للعامة حتى الآن ، ولكن ها هي الرموز 4.7: http://fontawesome.io/icons/

BhaveshSGupta أرسل لي رسالة في

QuincyLarson مرحبًا ، لقد قمت

QuincyLarson ofcourse سعيد لأن تكون قادرًا على المساعدة في ذلك!

BhaveshSGupta شكرا لمساعدتنا في هذا الجهد.
أيضًا ، وغني عن القول ، أننا سنضيف إصدارًا مصغرًا للإنتاج من الرموز على S3 ، لذلك تأكد فقط من عدم الالتزام بالملفات المصدر (التي ليست للتوزيع والتطوير فقط).

اضربني للحصول على أي مساعدة.

مرحبًا BhaveshSGupta ، هل يمكن أن تعطينا تحديثًا سريعًا حول كيفية حدوث ذلك؟

QuincyLarson في الوقت الحالي يمكننا فقط إزالة الاعتماد الأيوني عن طريق إجراء التغييرات المدرجة هنا واستخدام الصور المدرجة هنا . لهذا ، إذا كان بإمكانك استضافة هذه الملفات على S3 ومنحني الرابط لنفسه ، فلن يستغرق الأمر وقتًا طويلاً لإجراء تغييرات أخرى.

QuincyLarson وغيرهم من المهتمين

يسعدنا أن نعلن أن Font Awesome قد أصدرت الآن الإصدار 5.0.0
لديها كل الرموز التي نحتاجها.

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

لذلك ، لن نحتاج إلى أي صيانة للأيقونات (SVG ، إلخ) في نهايتنا.

ومن ثم ، فإن الترحيل جيد مثل إضافة الأقسام على الحزم الجديدة كما هو موثق في المستندات الرسمية أعلاه.

لقد بدأت بعض العمل هنا عند مفترقتي. لا تتردد في الدفع إليه عبر طلب السحب.

staging...raisedadead:feat/upgrade-fontawesome

تضمين التغريدة هل أنت متأكد من أنه يحتوي على كل ما نحتاجه؟ على سبيل المثال ، لم أتمكن من العثور على رمز D3 هناك ، ونحن نستخدمه لصفحتنا المقصودة. قد نضطر إلى الاحتفاظ ببعض ملفات SVG ، لكنني واثق من أنه يمكننا التخلص من مكتبة الرموز الأيونية الزائدة :)

لقد فتحت طلبا رسميا

في الوقت الحالي يمكننا استخدام الشعار الرسمي (متاح كـ SVG)
https://github.com/d3/d3-logo

raisedadead حسنًا - سيكون ذلك رائعًا. لاحظ أن الأمر استغرق أكثر من عام ومئات من إجراءات 1+ لمشكلة GitHub قبل أن يضيف فريق Font Awesome شعار freeCodeCamp ، لذلك قد يستغرق الأمر وقتًا طويلاً.

نحن نستخدم حاليًا بالفعل شعار D3 الرسمي على الصفحة المقصودة ، لذلك لا نحتاج إلى تغيير أي شيء. لقد أشرت للتو إلى أننا سنظل بحاجة إلى بعض ملفات SVG بالإضافة إلى الرموز التي يوفرها Font Awesome.

أعتقد أن أيونيك لا تزال تبعية. هل يهتم أي شخص بالمساعدة في إزالة مكتبة الرموز هذه من الريبو واستبدال الرموز بمثيلاتها من Font Awesome؟

مرحبًا QuincyLarson ، أود إلقاء نظرة على هذا!

حسنًا ، يبدو أن bhaveshsgupta و raisedadead قد قاما بمعظم عمليات الرفع الثقيلة بالفعل.

ما زلنا على Font Awesome v4.7. سيكون من الرائع التحديث إلى الإصدار 5.0 ؛ كما ذكرنا سابقًا ، لدينا ترخيص بالفعل ، والإصدار 5 يتضمن رموز JS و Node التي لا تتوفر في 4 وستزيل متطلبات الحفاظ على SVGs.

ومع ذلك ، هناك تغييرات فاصلة متضمنة في الترقية من 4 إلى 5. يمكننا استخدام الرقاقة الرسمية كحل سريع ، لكنها توفر لنا قدرًا ضئيلًا من الجهد حتى نقوم بالترقية "بشكل صحيح" في المستقبل.

هل يجب أن أطرح مشكلة جديدة لترقية Font Awesome؟ هناك عدد قليل من الخيارات للاختيار من بينها لتنفيذ الإصدار 5 وسيكون من الجيد لبعض المدخلات التي تعتبر الأفضل لاحتياجات FCC. قد يكون مانعًا لإزالة Ionic ولكن في رأيي ، فإن ترقية FA ستكون أفضل شيء يجب معالجته أولاً.

مرحبًا @ hctpscl

فقط لكي تعرف ، نود استبدال التبعيات في هذا الريبو والتعلم الذي يمثل منصة التعلم الخاصة بنا.

يمكنك التواصل معي إذا كنت بحاجة إلى أي مساعدة.

العلاقات العامة ستكون مكانًا جيدًا لمناقشة الجانب التقني للأشياء والتغييرات بالرغم من ذلك.

الشيء الوحيد المفقود هو شعار D3. ولكن هذا متاح أيضًا باعتباره SVG في مستودع أصول D3 الرسمي.