Freecodecamp: Remplacez les icônes Ionic par leurs équivalents Font Awesome et supprimez Ionic en tant que dépendance

@QuincyLarson je peux essayer celui-ci!
Bien que nous puissions ajouter des svg au lieu des icônes de police, et supprimer la police géniale en tant que dépendance.

nous pouvons ajouter des svg au lieu des icônes de police

Voulez-vous dire que nous créons et maintenons ces actifs?

oui, maintenant nous faisons cela pour l'image D3.js,
Je pense que nous pouvons obtenir des svg sous licence CC à partir de divers sites ou même les copier gratuitement.
Et beaucoup de gens suggèrent que l'on ne devrait pas utiliser les polices Icon à la place devrait utiliser les svg du point de vue de l'accessibilité (comme bootstrap 4 laisse tomber des icônes et passe au svg).

FontAwesome 5 va également proposer toutes les icônes SVG, ce qui représente une économie énorme en créant et en maintenant nous-mêmes un jeu d'icônes.

Et un gros bonus est qu'ils ont toutes les icônes, y compris notre icône fa-free-code-camp partir de 4.7.0

Et comme je l'ai dit, cela viendrait de toute façon gratuitement (en tant que SVG) dans la prochaine version majeure, avec compatibilité avec les backword.

Pour l'instant, je pense que nous devrions simplement nous concentrer sur la question du passage des icônes ioniques à la police géniale que nous avons déjà comme dépendance.

@BhaveshSGupta Je suis d'accord avec @raisedadead que nous devrions simplement utiliser Font Awesome qui est une excellente bibliothèque. Nous n'avons pas besoin de réinventer la roue.

Nous serions ravis de votre aide. Seriez-vous intéressé à travailler là-dessus? Si oui, pourriez-vous nous donner des mises à jour régulières de l'état afin que nous puissions savoir comment les choses progressent?

@QuincyLarson Sure Laissez-moi voir ça ce soir.

salut @QuincyLarson , @raisedadead
Ce sont toutes les icônes d'icônes ioniques que j'ai pu trouver, j'ai marqué des icônes de polices équivalentes. Si vous avez besoin de changer, faites-le moi savoir.

• [] .ion-android-hand vers .fa-hand-paper-o (email-signin.jade)
• [] .ion-person-add à fa-user-plus (email-signup.jade)
• [] .ion-close-encerclé à .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 en .fa-github (home.jade)
• [] .ion-android-globe vers .fa-globe (pmi-acp-agile-project-managers.jade)
• [] .ion-card vers .fa-credit-card (pmi-acp-agile-project-managers.jade)
• [] .ion-android-calendar vers .fa-calendar (pmi-acp-agile-project-managers.jade)
• [] .ion-ios-box vers .fa-archive (pmi-acp-agile-project-managers.jade)
• [] .ion-university vers .fa-graduation-cap (pmi-acp-agile-project-managers.jade)
• [] .ion-ios-list vers .fa-list-alt (pmi-acp-agile-project-managers.jade)
• [] .ion-ios-people vers .fa-users (pmi-acp-agile-project-managers.jade)

- [] .ion-settings en .fa-wrench (pmi-acp-agile-project-managers.jade)

Impossible de trouver des icônes pour les éléments suivants.
.ion-social-javascript (home.jade)
.ion-social-nodejs (home.jade)

L'ajout de l'icône NodeJS à la bibliothèque FA est en attente depuis décembre 2013, numéro 2584 . Je n'ai pas trouvé de problème pour l'icône JS. Je suis allé de l'avant et j'ai pris la liberté de convertir les deux icônes ci-dessus en polices d'icônes à l'aide des SVG Fontello et Ion Icon.

Je pense que même si nous passons complètement aux icônes FA, il y aura un besoin d'icônes personnalisées et par conséquent, nous devrions maintenir une police d'icônes FCC personnalisée.

Icône SVGs.zip

fontello-7ce4e099.zip

@BhaveshSGupta excellente liste! Oui - avez-vous le temps de faire ces substitutions vous-même afin que vous puissiez en obtenir le crédit dans l'histoire de Git?

@iHarshad Oui - je suis d'accord que nous devrions inclure nos propres images SVG là où Font Awesome fait défaut. Ce sera beaucoup plus petit que d'inclure Ionic pour seulement quelques icônes.

@QuincyLarson, pourquoi pas j'aimerais faire ça,
et si nous voulons utiliser un kit personnalisé, nous pouvons utiliser quelque chose comme icomoon.io où nous pouvons ajouter des polices géniales et des polices personnalisées et créer un kit unique avec uniquement les icônes requises

@BhaveshSGupta Oui, nous pourrions essayer ça. Je pourrais aussi simplement prendre la poignée de fichiers SVG spécifiques dont nous avons besoin et les mettre dans S3. Ils ne sont pas très gros - juste quelques kilo-octets chacun :)

@QuincyLarson Je pense que @BhaveshSGupta a fait une bonne suggestion ici.

Au lieu de charger toute la bibliothèque Font Awesome, nous pourrions utiliser quelque chose comme Fontello pour choisir des icônes partout où nous en avons besoin et télécharger les fichiers générés sur S3. Je l'ai utilisé dans plusieurs de mes projets et c'est un processus très simple.

@ dakshshah96 OK - mais si je comprends bien, je pense que nous voudrons de toute façon charger toute la bibliothèque Font Awesome parce que @BerkeleyTrue construit un éditeur de type JSBin, et nous voudrons que les campeurs puissent utiliser Font Awesome là-dedans.

Cher Monsieur,

Attendez mon contributeur de sept typodeart de jardin.

Cordialement
Le 22 juin 2017 à 06h02, "Quincy Larson" [email protected] a écrit:

@ dakshshah96 https://github.com/dakshshah96 OK - mais si je comprends
correctement, je pense que nous voudrons charger toute la bibliothèque Font Awesome
de toute façon parce que @BerkeleyTrue https://github.com/berkeleytrue est
construire un éditeur de type JSBin, et nous voudrons que les campeurs puissent utiliser Font
Génial là-dedans.

-
Vous recevez ceci parce que vous êtes abonné à ce fil.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310217649 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/ALc8XLcX7m38iuBq7htBigFEqOI5lFR6ks5sGZLggaJpZM4MWGCb
.

@QuincyLarson Je vois, alors nous aurons besoin de Font Awesome.

Cependant, il existe une alternative. Peut-être pourrions-nous laisser les campeurs insérer une balise de script au lieu d'inclure Font Awesome à l'échelle du site, même si cela n'est nécessaire que sur l'éditeur en cours de construction?

Dans icomoon, nous pouvons ajouter une police complète avec des icônes personnalisées que j'ai
faire cela à de nombreux projets, non seulement des polices géniales, mais il y en a peu d'autres gratuits
kits.

Le jeu.22 juin 2017, 03:38, Daksh Shah, [email protected] a écrit:

@QuincyLarson https://github.com/quincylarson Je vois, alors nous aurons besoin
Police géniale.

Cependant, il existe une alternative. Peut-être pourrions-nous laisser les campeurs insérer un
balise de script au lieu d'inclure Font Awesome à l'échelle du site même si elle
nécessaire juste sur l'éditeur en cours de construction?

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310218975 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AEA75e44KO5ivCcTCHyHEFTNu9LfGlN7ks5sGZQ8gaJpZM4MWGCb
.

@BhaveshSGupta affecterait-il la syntaxe que les campeurs utilisent pour ajouter des icônes Font Awesome à leurs défis et projets de codage sur freeCodeCamp?

@QuincyLarson Il y aurait un petit changement qui serait au lieu de fa-search dont ils ont besoin pour utiliser la recherche d'icônes. J'ai besoin de voir s'il existe un moyen d'éviter cela, en attendant, vous pouvez consulter icomoon.io si vous avez du temps libre

font-awesome vient d'annoncer qu'ils sont en alpha, et devraient être en version bêta publique le mois prochain sur leur Kickstarter.

Ils vont publier le framework SVG en tant que OSS pour tout le monde, pour l'utiliser comme création d'icônes personnalisées.

Nous n'aurions pas besoin de bibliothèques ou de dépendances supplémentaires à l'exception de FA.

@raisedadead merci pour le heads-up. @BhaveshSGupta Puisque nous utilisons déjà Font Awesome pour toutes nos icônes (ou du moins, nous le serons une fois que nous nous débarrasserons des icônes Ionic restantes), je propose d'attendre que Font Awesome le libère, et nous pouvons simplement utiliser SVG statique les fichiers nécessaires pour l'instant (je peux les héberger dans un dossier S3)

@QuincyLarson Je mettrais à jour l'emblématique selon ceci , même si j'aurais besoin d'alternatives pour .ion-social-javascript (home.jade)
.ion-social-nodejs (home.jade)

@BhaveshSGupta Génial! Voici le logo JS en SVG (nous avons pensé que nous voudrions le centrer et l'agrandir - savez-vous comment faire cela?

Voici le logo Node - vous devrez le télécharger et le rendre monochrome: https://seeklogo.com/vector-logo/273749/node-js

S'il vous plaît laissez-moi savoir si je peux être d'une aide supplémentaire avec ceux-ci :)

@BhaveshSGupta voici les logos ci-dessus édités comme @QuincyLarson mentionné. J'ai utilisé VectorPaint pour apporter des modifications et supprimer les métadonnées de marque.

Logo JS SVG modifié - https://goo.gl/xP72mF
Logo SVG du nœud modifié - https://goo.gl/dN4i2M

@iHarshad a l'air génial, @QuincyLarson je les garde dans le dossier public / images à partir de maintenant

@BhaveshSGupta @iHarshad Ce serait formidable si vous pouviez également les ajouter au repo freeCodeCamp / assets via un PR.

@raisedadead Bien sûr, les ajouteraient également dans le

@iHarshad vos nouveaux logos ont

Vous pourriez envisager d'ouvrir une pull request à Font Awesome avec ceux-ci. Ils peuvent ne pas les accepter, mais cela peut accélérer leur travail pour obtenir des versions standard de ces icônes dans leur bibliothèque :)

@raisedadead @BhaveshSGupta @iHarshad Savez-vous si nous pouvons effectivement passer à l'extraction de fichiers SVG? Je pense que ce serait beaucoup plus rapide que de charger la bibliothèque Font Awesome.

Nous voulons accélérer la vitesse de chargement de la page initiale , et je pense que charger uniquement les SVG dont nous avons besoin peut nous permettre de faire une grande partie du chemin :)

Vous pourriez envisager d'ouvrir une pull request à Font Awesome avec ceux-ci.

Sur FA 4, ils n'acceptent aucun PR pour le moment pour les demandes d'icônes. Si vous le souhaitez, vous devez accéder au repo FA 5. Malheureusement, c'est privé en version bêta.

Savez-vous si nous pouvons effectivement passer à l'extraction de fichiers SVG? Je pense que ce serait beaucoup plus rapide que de charger la bibliothèque Font Awesome.

Parlons-nous uniquement de la page d'accueil?
Voici le rapport phare avec des suggestions d'amélioration.

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

Comme @raisedadead a souligné les problèmes liés à l'utilisation de FA4 et FA5, nous pourrions utiliser une feuille de sprite d'image ( référence ) pour nos icônes personnalisées qui ne sont pas prises en charge par FA.

Que pensez-vous tous?

Les vitesses de page n'ont rien à voir avec FA et CSS plutôt non optimisé dans son ensemble. @QuincyLarson Je pense que nous devrions plutôt suivre cela sur un fil séparé.

@raisedadead a accepté. Pourriez-vous créer un problème distinct qui explique ces problèmes - de préférence avec une liste de contrôle des choses que nous pouvons faire pour optimiser notre CSS?

@QuincyLarson bien sûr, je le ferai dès que nous aurons la nouvelle mise en page en place et la consoliderons.

J'ai fermé ce numéro par erreur - c'est toujours quelque chose que nous voulons accomplir activement. Mettre à jour les étiquettes en conséquence.

@BhaveshSGupta Êtes-vous toujours intéressé à nous aider à mettre à jour ces icônes?

@QuincyLarson oui je suis

@BhaveshSGupta Génial! Faites-moi savoir si je peux faire quelque chose pour vous aider.

@QuincyLarson enfin ici, nous remplacerions selon ceci et utiliserions des images svg qui sont fournies par @iHarshad selon ceci et ajouterions également ces images à freeCodeCamp / assets selon @raisedadead

@BhaveshSGupta C'est parfaitement correct!

@BhaveshSGupta Oui, exactement.

Je suis heureux d'annoncer que grâce à @raisedadead , freeCodeCamp dispose désormais d'une licence pour utiliser Font Awesome 5.0! Merci mec!

Je ne les vois pas encore publiquement visibles, mais voici les icônes 4.7: http://fontawesome.io/icons/

@BhaveshSGupta m'envoie un message dans Gitter et je vais vous donner le fichier icône 5.0 (puisque je pense que vous prévoyez d'exporter ceux que nous voulons vers un ensemble de fichiers séparé, afin que nous puissions créer notre propre CDN pour eux).

@QuincyLarson Hé, je t'ai envoyé un texto sur gitter, passe-moi le fichier quand tu es libre

@QuincyLarson est bien sûr heureux de pouvoir vous aider!

@BhaveshSGupta merci de nous aider dans cet effort.
De plus, il va sans dire que nous ajouterons une version de production minifiée des icônes sur S3, alors assurez-vous de ne pas valider les fichiers source (qui ne sont PAS destinés à la distribution et au développement uniquement).

Frappez-moi pour toute aide.

Salut @BhaveshSGupta pourriez-vous nous donner une mise à jour rapide sur la façon dont cela se passe?

@QuincyLarson Pour l'instant, nous pouvons simplement supprimer la dépendance ionique en apportant les modifications répertoriées ici et en utilisant les images répertoriées ici . Pour cela, si vous pouvez héberger ces fichiers sur S3 et me donner le lien pour cela, il ne faudra pas beaucoup de temps pour faire d'autres changements.

@QuincyLarson et autres intéressés

Heureux d'annoncer que Font Awesome a maintenant publié la version 5.0.0
Il contient toutes les icônes dont nous avons besoin.

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

Ainsi, nous n'aurions pas besoin de maintenance des icônes (SVG, etc.) de notre côté.

Par conséquent, la migration est aussi bonne que l'ajout des deps sur les nouveaux packages, comme indiqué dans la documentation officielle ci-dessus.

J'ai commencé un travail ici à ma fourche. N'hésitez pas à y pousser via pull request.

staging...raisedadead:feat/upgrade-fontawesome

@raisedadead Génial! Êtes-vous sûr qu'il contient tout ce dont nous avons besoin? Par exemple, je n'ai pas trouvé d'icône D3 là-dedans, et nous l'utilisons pour notre page de destination. Nous devrons peut-être conserver quelques fichiers SVG, mais je suis convaincu que nous pouvons nous débarrasser de la bibliothèque d'icônes Ionic redondante :)

J'ai ouvert une demande officielle

Pour l'instant, nous pourrions utiliser le logo officiel (disponible en SVG)
https://github.com/d3/d3-logo

@raisedadead OK - ce serait génial. Notez qu'il a fallu plus d'un an et des centaines de +1 sur le problème GitHub avant que l'équipe Font Awesome ajoute le logo freeCodeCamp, cela peut donc prendre beaucoup de temps.

Nous utilisons déjà actuellement le logo officiel D3 sur la page de destination, nous n'avons donc rien à changer. Je faisais juste remarquer que nous aurons encore besoin de certains fichiers SVG en plus des icônes fournies par Font Awesome.

Je pense que Ionic est toujours une dépendance. Quelqu'un serait-il intéressé à aider à supprimer cette bibliothèque d'icônes du référentiel et à remplacer les icônes par leurs équivalents Font Awesome?

Hé @QuincyLarson , j'aimerais jeter un coup d'œil à ça!

D'accord, on dirait que @bhaveshsgupta et @raisedadead ont déjà fait le gros du travail.

Nous sommes toujours sur Font Awesome v4.7. Ce serait formidable de mettre à jour à 5.0; comme indiqué précédemment, nous avons déjà une licence, et la version 5 inclut les icônes JS et Node que 4 ne fait pas et supprimerait l'obligation de maintenir ces SVG.

Cependant, il y a des changements de rupture impliqués dans la mise à niveau de 4 à 5. Nous pourrions utiliser le shim de mise à niveau officiel comme solution rapide, mais cela ne nous permet que peu d'efforts jusqu'à ce que nous procédions «correctement» à une mise à niveau future.

Dois-je soulever un nouveau problème pour la mise à jour de Font Awesome? Il y a quelques options à choisir pour l'implémentation de la version 5 et ce serait bien pour une contribution sur laquelle est la meilleure pour les besoins de FCC. Cela pourrait être un bloqueur pour supprimer Ionic, mais à mon avis, la mise à niveau de FA serait la meilleure chose à aborder en premier.

Salut @hctpscl

Juste pour que vous le sachiez, nous aimerions remplacer les dépendances dans ce dépôt et le dépôt d'apprentissage qui est notre plateforme d'apprentissage.

Vous pouvez me contacter si vous avez besoin d'aide.

Un PR serait cependant un bon endroit pour discuter de l'aspect technique des choses et des changements.

La seule chose qui manque est le logo D3. Mais cela est également disponible en SVG sur le repo officiel des actifs D3.