Freecodecamp: Замените значки Ionic их эквивалентами Font Awesome и удалите Ionic как зависимость.

@QuincyLarson Я могу попробовать это!
Хотя мы можем добавить svg вместо значка шрифта, а также удалить font awesome как зависимость.

мы можем добавить svg вместо значка шрифта

Вы имеете в виду, что мы создаем и поддерживаем эти активы?

да, прямо сейчас мы делаем это для изображения D3.js,
Я думаю, что мы можем получить svg под лицензией CC с разных сайтов или даже бесплатно.
И многие люди предлагают не использовать шрифты Icon, а вместо этого использовать svg с точки зрения доступности (например, bootstrap 4 удаляет значки и перемещается в svg).

FontAwesome 5 также будет предлагать все значки SVG, что дает огромную экономию средств на создание и обслуживание набора значков самостоятельно.

И большой бонус в том, что у них есть все значки, включая наш значок fa-free-code-camp с 4.7.0

И, как я уже сказал, в любом случае это будет бесплатно (как SVG) до следующей основной версии, с обратной совместимостью.

На данный момент я считаю, что мы должны просто сосредоточиться на проблеме перехода от ионных иконок к font-awesome, которые у нас уже есть как зависимость.

@BhaveshSGupta Я согласен с @raisedadead, что мы должны просто использовать Font Awesome, отличную библиотеку. Нам не нужно изобретать велосипед.

Мы будем рады вашей помощи в этом. Вам было бы интересно поработать над этим? Если да, не могли бы вы регулярно обновлять статус, чтобы мы могли знать, как идут дела?

@QuincyLarson Конечно, дай мне посмотреть сегодня вечером.

привет @QuincyLarson , @raisedadead
Это все значки Ionic, которые я смог найти, я выделил эквивалентные значки с отличным шрифтом. Если что-то нужно изменить, дайте мне знать.

• [] .ion-android-hand в .fa-hand-paper-o (email-signin.jade)
• [] .ion-person-add в fa-user-plus (email-signup.jade)
• [] .ion-close-circleled 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-global в .fa-global (pmi-acp-agile-project-manager.jade)
• [] .ion-card на .fa-credit-card (pmi-acp-agile-project-manager.jade)
• [] .ion-android-calendar в .fa-calendar (pmi-acp-agile-project-manager.jade)
• [] .ion-ios-box в .fa-архив (pmi-acp-agile-project-manager.jade)
• [] .ion-University в .fa-Graduation-Cap (pmi-acp-agile-project-manager.jade)
• [] .ion-ios-list в .fa-list-alt (pmi-acp-agile-project-manager.jade)
• [] .ion-ios-people для .fa-пользователей (pmi-acp-agile-project-manager.jade)

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

Не удалось найти значки для следующего.
.ion-social-javascript (home.jade)
.ion-social-nodejs (домашний.jade)

Добавление значка NodeJS в библиотеку FA ожидается с декабря 2013 г., проблема № 2584 . Я не смог найти проблему со значком JS. Я пошел дальше и взял на себя смелость преобразовать две вышеуказанные иконки в иконочные шрифты, используя Fontello и Ion Icon SVG.

Я считаю, что даже если мы полностью переключимся на значки 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, чтобы выбирать значки из

@ dakshshah96 Хорошо, но если я правильно понимаю, я думаю, что мы все равно захотим загрузить всю библиотеку Font Awesome, потому что

Уважаемый господин,

Подождите, пока мой автор семь садовых опечаток.

С уважением
22 июня 2017 г. в 6:02 «Куинси Ларсон» [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.

Однако есть альтернатива. Может быть, мы позволим туристам вставить
script вместо включения 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 им нужно было использовать icon-search. Мне нужно посмотреть, есть ли способ избежать этого, а пока вы можете проверить icomoon.io, если у вас будет немного свободного времени

font-awesome только что объявил, что они находятся в стадии альфа-тестирования и к следующему месяцу должны выйти в публичную бета-версию на своем Kickstarter.

Они собираются выпустить фреймворк SVG как OSS для всех, для использования в качестве пользовательских значков.

Нам не понадобятся никакие дополнительные библиотеки или зависимости, кроме FA.

@raisedadead, спасибо за @BhaveshSGupta Поскольку мы уже используем Font Awesome для всех наших значков (или, по крайней мере, мы будем, когда избавимся от оставшихся ионных значков), я предлагаю дождаться, пока Font Awesome выпустит его, и мы можем просто использовать статический SVG файлы по мере необходимости (я могу разместить их в папке S3)

@QuincyLarson Я бы этому , хотя мне понадобятся альтернативы для .ion-social-javascript (home.jade)
.ion-social-nodejs (домашний.jade)

@BhaveshSGupta Потрясающе! Вот логотип JS в SVG (мы думали, что нам нужно выровнять его по центру и увеличить - вы знаете, как это сделать?

Вот логотип Node - вам нужно скачать его и сделать монохромным: https://seeklogo.com/vector-logo/273749/node-js

Пожалуйста, дайте мне знать, если я могу чем-нибудь помочь с этим :)

@BhaveshSGupta, вот вышеупомянутые логотипы, отредактированные как @QuincyLarson . Я использовал VectorPaint, чтобы внести изменения и удалить метаданные брендинга.

Отредактированный логотип JS SVG - https://goo.gl/xP72mF
Отредактированный логотип узла SVG - https://goo.gl/dN4i2M

@iHarshad Выглядит потрясающе, @QuincyLarson Сейчас я храню их в папке public / images

@BhaveshSGupta @iHarshad Было бы здорово, если бы вы могли добавить их в репозиторий freeCodeCamp / assets также через PR.

@raisedadead Конечно, добавлю их и в репо активов.

@iHarshad, твои новые логотипы отлично смотрятся! Спасибо за это.

С их помощью вы можете открыть запрос на перенос в Font Awesome. Они могут не принять их, но это может ускорить их работу, если стандартные версии этих иконок будут добавлены в свою библиотеку :)

@raisedadead @BhaveshSGupta @iHarshad Знаете ли вы, действительно ли мы можем переключиться на

Мы хотим получить эту начальную скорость загрузки страницы быстрее , и я думаю, что загрузка только необходимых нам SVG может помочь нам в этом деле :)

С их помощью вы можете открыть запрос на перенос в Font Awesome.

На FA 4 они на данный момент не принимают никаких PR для запросов значков. Если вы хотите, вам понадобится доступ к репо FA 5. К сожалению, это закрытая бета-версия.

Вы знаете, действительно ли мы можем переключиться на извлечение файлов 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, да, я в деле.

@BhaveshSGupta Потрясающе! Дай мне знать, могу ли я чем-нибудь помочь.

@QuincyLarson, наконец, здесь мы этим и будем использовать изображения svg, которые предоставляются @iHarshad в соответствии с этим, а также добавим эти изображения в freeCodeCamp / assets в соответствии с @raisedadead

@BhaveshSGupta Совершенно верно!

@BhaveshSGupta Да, именно так.

Я рад сообщить, что благодаря @raisedadead у freeCodeCamp теперь есть лицензия на использование Font Awesome 5.0! Спасибо чувак!

Я пока не вижу их в открытом доступе, но вот значки 4.7: http://fontawesome.io/icons/

@BhaveshSGupta отправьте мне сообщение в Gitter, и я дам вам файл значков 5.0 (поскольку я думаю, вы планируете экспортировать те, которые нам нужны, в отдельный набор файлов, чтобы мы могли создать для них наш собственный CDN).

@QuincyLarson Эй, я написал тебе через gitter, передай мне файл, когда будешь свободен

@QuincyLarson, конечно, счастлив, что может помочь в этом!

@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

@raisedadead Замечательно ! Вы уверены, что в нем есть все, что нам нужно? Например, мне не удалось найти там значок D3, и мы используем его для нашей целевой страницы. Возможно, нам придется сохранить несколько файлов SVG, но я уверен, что мы сможем избавиться от избыточной библиотеки значков Ionic :)

Я открыл официальный запрос

Пока мы можем использовать официальный логотип (доступный как SVG).
https://github.com/d3/d3-logo

@raisedadead Хорошо, это было бы здорово. Обратите внимание, что потребовалось больше года и сотни +1 к проблеме GitHub, прежде чем команда Font Awesome добавила логотип freeCodeCamp, так что это может занять много времени.

В настоящее время мы уже используем официальный логотип D3 на целевой странице, поэтому нам не нужно ничего менять. Я просто указывал, что нам все равно понадобятся некоторые файлы SVG в дополнение к значкам, предоставляемым Font Awesome.

Я считаю, что Ionic по-прежнему является зависимостью. Кто-нибудь будет заинтересован в том, чтобы помочь удалить эту библиотеку значков из репо и заменить значки их эквивалентами Font Awesome?

Привет, @QuincyLarson , я бы хотел взглянуть на это!

Хорошо, похоже, что @bhaveshsgupta и @raisedadead уже сделали большую часть тяжелой работы.

Мы все еще используем Font Awesome v4.7. Было бы здорово обновиться до 5.0; как отмечалось ранее, у нас уже есть лицензия, и версия 5 включает значки JS и Node, которых нет в 4, и снимет необходимость поддерживать эти SVG.

Однако есть критические изменения, связанные с обновлением с 4 до 5. Мы могли бы использовать официальную прокладку обновления в качестве быстрого исправления, но это сэкономит нам лишь немного усилий, пока мы не обновим «должным образом» в будущем.

Стоит ли поднимать новую проблему для обновления Font Awesome? Есть несколько вариантов для реализации версии 5, и было бы неплохо внести некоторые предложения, которые лучше всего подходят для нужд FCC. Это может быть блокировщиком для удаления Ionic, но, на мой взгляд, лучше было бы сначала заняться обновлением FA.

Привет @hctpscl

Просто чтобы вы знали, мы хотели бы заменить зависимости в этом репо и репо для обучения, которое является нашей обучающей платформой.

Вы можете связаться со мной, если вам понадобится помощь.

Однако PR было бы хорошим местом для обсуждения технической стороны вещей и изменений.

Единственное, чего не хватает, так это логотипа D3. Но это также доступно в виде SVG в официальном репо с активами D3.