Freecodecamp: Ionic 아이콘을 Font Awesome 등가물로 교체하고 Ionic을 종속성으로 제거

@QuincyLarson 나는 이것을 시도 할 수 있습니다!
글꼴 아이콘 대신 svg를 추가 할 수 있지만 종속성으로 인해 멋진 글꼴도 제거 할 수 있습니다.

글꼴 아이콘 대신 svg를 추가 할 수 있습니다.

우리가 그러한 자산을 만들고 유지한다는 뜻입니까?

예, 지금 D3.js 이미지에 대해 수행합니다.
다양한 사이트에서 CC 라이선스에 따라 svg를 얻거나 무료로 복사 할 수도 있다고 생각합니다.
그리고 많은 사람들은 접근성 관점에서 아이콘 글꼴을 사용하지 말아야한다고 제안합니다.

FontAwesome 5는 또한 모든 SVG 아이콘을 제공 할 것입니다. 이는 아이콘 세트를 직접 만들고 유지하는 데 드는 엄청난 비용 절감입니다.

그리고 큰 보너스는 4.7.0 현재 fa-free-code-camp 아이콘을 포함한 모든 아이콘이 있다는 것입니다.

그리고 내가 말했듯이 이것은 백 워드 호환성과 함께 다음 메이저 버전에 무료로 (SVG로) 올 것입니다.

지금은 우리가 이미 의존성으로 가지고있는 ionic 아이콘에서 font-awesome으로 이동하는 문제에 간단하게 초점을 맞춰야한다고 생각합니다.

@BhaveshSGupta 나는 우리가 훌륭한 라이브러리 인 Font Awesome을 사용해야한다는 @raisedadead에 동의합니다. 우리는 바퀴를 재발 명 할 필요가 없습니다.

우리는 당신의 도움을 원합니다. 이 작업에 관심이 있으십니까? 그렇다면 상황이 어떻게 진행되고 있는지 알 수 있도록 정기적 인 상태 업데이트를 제공해 주시겠습니까?

@QuincyLarson 그럼 오늘 밤 보자.

안녕하세요 @QuincyLarson , @raisedadead
이것들은 내가 찾을 수있는 모든 Ionic 아이콘 들이며, 동등한 글꼴의 멋진 아이콘들을 표시했습니다. 변경이 필요한 경우 알려주십시오.

• [] .ion-android-hand에서 .fa-hand-paper-o (email-signin.jade)로
• [] .ion-person-add to fa-user-plus (email-signup.jade)
• [] .ion-close-circle 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에서 .fa-wrench (pmi-acp-agile-project-managers.jade)로

다음 아이콘을 찾을 수 없습니다.
.ion-social-javascript (home.jade)
.ion-social-nodejs (home.jade)

FA 라이브러리에 NodeJS 아이콘 추가는 2013 년 12 월, Issue # 2584 이후 보류 중입니다. JS 아이콘에 대한 문제를 찾을 수 없습니다. 나는 계속해서 Fontello 및 Ion Icon SVG를 사용하여 위의 두 아이콘을 아이콘 글꼴로 자유롭게 변환했습니다.

FA 아이콘으로 완전히 전환하더라도 사용자 지정 아이콘이 필요하므로 사용자 지정 FCC 아이콘 글꼴을 유지해야합니다.

아이콘 SVGs.zip

fontello-7ce4e099.zip

@BhaveshSGupta 훌륭한 목록! 예-Git 기록에서 이에 대한 크레딧을 얻을 수 있도록 이러한 대체 작업을 직접 수행 할 시간이 있습니까?

@iHarshad 예

@QuincyLarson 확실히 내가 그렇게하고 싶지 않은 이유,
맞춤 키트를 사용하려면 icomoon.io와 같은 것을 사용하여 멋진 글꼴 글꼴과 맞춤 글꼴을 추가하고 필요한 아이콘 만있는 단일 키트를 만들 수 있습니다.

@BhaveshSGupta 예 우리는 그것을 시도 할 수 있습니다. 또한 필요한 특정 SVG 파일 몇 개만 가져 와서 S3에 넣을 수도 있습니다. 그들은 그다지 크지 않습니다-각각 몇 킬로바이트입니다 :)

@QuincyLarson @BhaveshSGupta 가 여기에 좋은 제안을 한 것 같습니다.

전체 Font Awesome 라이브러리를로드하는 대신 Fontello 와 같은 것을 사용하여 필요한 곳에서 아이콘을 선택하고 생성 된 파일을 S3에 업로드 할 수 있습니다. 여러 프로젝트에서 사용했는데 매우 간단한 프로세스입니다.

@ dakshshah96 좋아요-하지만 제가 올바르게 이해한다면, @BerkeleyTrue 가 JSBin과 같은 편집기를 만들고 있기 때문에 어쨌든 전체 Font Awesome 라이브러리를로드하고 싶을 것입니다. 그리고 우리는 캠프 참가자들이 거기에서 Font Awesome을 사용할 수 있기를 원할 것입니다.

근계,

7 개의 정원 타이포 데 아트의 제 기고자를 기다리십시오.

문안 인사
2017 년 6 월 22 일 오전 6:02에 "Quincy Larson" [email protected]이 작성했습니다.

@ dakshshah96 https://github.com/dakshshah96 OK- 하지만 이해한다면
올바르게, 전체 Font Awesome 라이브러리를로드하고 싶을 것입니다.
어쨌든 @BerkeleyTrue https://github.com/berkeleytrue 는
JSBin과 같은 편집기를 만들고, 캠프 참가자들이 글꼴을 사용할 수 있기를 바랍니다.
거기 굉장합니다.

—
이 스레드를 구독했기 때문에이 메시지가 전송되었습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310217649 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/ALc8XLcX7m38iuBq7htBigFEqOI5lFR6ks5sGZLggaJpZM4MWGCb
.

@QuincyLarson 알겠습니다 . Font Awesome이 필요합니다.

그러나 대안이 있습니다. 아마도 우리는 그것이 빌드되는 편집기에서만 필요하더라도 Campers가 Font Awesome 사이트 전체를 포함하는 대신 스크립트 태그를 삽입하도록 할 수 있습니까?

icomoon에서는 내가 가지고있는 사용자 정의 아이콘과 함께 멋진 전체 글꼴을 추가 할 수 있습니다.
많은 프로젝트에이 작업을 수행합니다. 글꼴이 멋질뿐만 아니라 무료
키트.

2017 년 6 월 22 일 목요일 오전 3:38 Daksh Shah, [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 캠프 참가자가 freeCodeCamp의 코딩 과제 및 프로젝트에 Font Awesome 아이콘을 추가하는 데 사용하는 구문에 영향을 미칠까요?

@QuincyLarson fa-search 대신 icon-search를 사용해야하는 작은 변화가있을 것입니다. 이 문제를 피할 수있는 방법이 있는지 확인해야합니다. 한편 여유 시간이 있으면 icomoon.io를 확인하세요.

font-awesome은 방금 알파 버전이며 다음 달까지 Kickstarter에서 공개 베타 버전으로 출시 될 것이라고 발표했습니다.

그들은 사용자 정의 아이콘을 만드는 데 사용하기 위해 SVG 프레임 워크를 모두를위한 OSS로 출시 할 것입니다.

FA를 제외하고는 추가 라이브러리 나 종속성이 필요하지 않습니다.

@raisedadead 헤즈 업 감사합니다. @BhaveshSGupta 우리는 이미 모든 아이콘에 대해 Font Awesome을 사용하고 있기 때문에 (또는 적어도 나머지 Ionic 아이콘을 제거하면) Font Awesome이 릴리스 될 때까지 기다릴 것을 제안하고 정적 SVG를 사용할 수 있습니다. 현재 필요한 파일 (S3 폴더에 호스팅 할 수 있음)

@QuincyLarson 나는 .ion-social-javascript (home.jade)에 대한 대안이 필요하지만 이것 에 따라 아이콘을 업데이트 할 것입니다.
.ion-social-nodejs (home.jade)

트윗 담아 가기 다음 은 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 지금은 공개 / 이미지 폴더에 보관하고 있습니다.

@BhaveshSGupta @iHarshad PR을 통해 freeCodeCamp / assets repo에도 추가 할 수 있다면 좋을 것입니다.

@raisedadead 물론, 자산 저장소에도 추가 할 것입니다.

@iHarshad 새 로고가 멋져 보입니다! 만들어 주셔서 감사합니다.

이것으로 Font Awesome에 대한 풀 요청을 여는 것을 고려할 수 있습니다. 그들은 그것을 받아들이지 않을 수도 있지만, 이러한 아이콘의 표준 버전을 라이브러리에 가져 오기 위해 작업 속도를 높일 수 있습니다. :)

@raisedadead @BhaveshSGupta @iHarshad 실제로 SVG 파일을 가져 오는 것으로 전환 할 수 있는지 아십니까? Font Awesome 라이브러리를로드하는 것보다 훨씬 빠를 것 같습니다.

우리는 이 초기 페이지로드 속도를 더 빨리 얻고 싶고, 필요한 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 및 전체적으로 최적화되지 않은 CSS와 관련이 없습니다. @QuincyLarson 나는 우리가 그것을 별도의 스레드에서 추적해야한다고 생각합니다.

@raisedadead가 동의했습니다. 이러한 문제를 설명하는 별도의 문제를 만들 수 있습니까? 가급적 CSS를 최적화하기 위해 할 수있는 체크리스트와 함께?

@QuincyLarson 확실히, 새로운 레이아웃이 제자리에 배치되고 통합되는대로 바로하겠습니다.

이 문제를 실수로 닫았습니다. 이것은 여전히 ​​우리가 적극적으로 달성하고자하는 것입니다. 그에 따라 라벨을 업데이트합니다.

@BhaveshSGupta 이 아이콘을 업데이트하는 데 여전히 관심이 있습니까?

@QuincyLarson 맞아요.

트윗 담아 가기 도움이 필요하면 알려주세요.

@QuincyLarson 마침내 여기에 우리가 따라 교체 될 이 와 SVG에 따라 @iHarshad에서 제공하는 이미지를 사용하는 것 이 @raisedadead에 따라도 freeCodeCamp이 이미지를 추가 / 자산

@BhaveshSGupta 완벽하게 맞습니다!

@BhaveshSGupta 네, 맞습니다.

@raisedadead 덕분에 기쁩니다 ! 고마워요!

아직 공개적으로 볼 수 없지만 4.7 아이콘은 다음과 같습니다. http://fontawesome.io/icons/

@BhaveshSGupta 가 Gitter에서 메시지를 보내면 5.0 아이콘 파일을 줄 것입니다 (원하는 파일을 별도의 파일 세트로 내보낼 계획이므로 자체 CDN을 만들 수 있습니다).

@QuincyLarson 안녕하세요, 나는 당신에게 문자 메시지를 보냈습니다.

@QuincyLarson ofcourse의 도움을 드릴 수있어 기쁩니다!

@BhaveshSGupta 의 노력에 도움을 주셔서 감사합니다.
또한 S3에 아이콘의 축소 된 프로덕션 버전을 추가 할 예정이므로 소스 파일 (배포 및 개발 전용이 아님)을 커밋하지 마십시오.

도움이 필요하면 저를 누르십시오.

안녕하세요 @BhaveshSGupta 가 어떻게 진행되고 있는지에 대한 빠른 업데이트를 제공 할 수 있습니까?

@QuincyLarson 지금은 여기에 나열된 내용을 변경하고 여기에 나열된 이미지를 사용하여 이온 의존성을 제거 할 수

@QuincyLarson 및 기타 관심있는 사람

Font Awesome이 버전 5.0.0을 출시했습니다.
필요한 모든 아이콘이 있습니다.

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

따라서 우리는 아이콘 (SVG 등)에 대한 유지 관리가 필요하지 않습니다.

따라서 마이그레이션은 위의 공식 문서에 문서화 된대로 새 패키지에 deps를 추가하는 것만 큼 좋습니다.

나는 여기 내 포크에서 몇 가지 작업을 시작했습니다. 풀 요청을 통해 자유롭게 푸시하십시오.

staging...raisedadead:feat/upgrade-fontawesome

트윗 담아 가기 우리에게 필요한 모든 것이 있다고 확신하십니까? 예를 들어, 거기에서 D3 아이콘을 찾을 수 없어서 랜딩 페이지에 사용합니다. 몇 개의 SVG 파일을 보관해야 할 수도 있지만 중복 Ionic 아이콘 라이브러리를 제거 할 수 있다고 확신합니다. :)

나는 공식적인 요청 을 열었습니다

지금은 공식 로고 (SVG로 제공)를 사용할 수 있습니다.
https://github.com/d3/d3-logo

@raisedadead OK- 좋을 것입니다. Font Awesome 팀이 freeCodeCamp 로고를 추가하기까지 GitHub 문제에 대해 1 년 이상 수백 번의 +1이 걸렸으므로 시간이 오래 걸릴 수 있습니다.

현재 랜딩 페이지에 이미 공식 D3 로고를 사용하고 있으므로 아무것도 변경할 필요가 없습니다. Font Awesome에서 제공하는 아이콘 외에도 일부 SVG 파일이 여전히 필요하다는 점을 지적했습니다.

Ionic은 여전히 ​​의존성이라고 생각합니다. 누구든지 저장소에서이 아이콘 라이브러리를 제거하고 아이콘을 Font Awesome에 해당하는 것으로 바꾸는 데 관심이 있습니까?

안녕하세요 @QuincyLarson , 이것을 살펴보고 싶습니다!

좋아, @bhaveshsgupta 와 @raisedadead 가 이미 대부분의 무거운 작업을 수행 한 것 같습니다.

우리는 여전히 Font Awesome v4.7을 사용하고 있습니다. 5.0으로 업데이트하면 좋을 것입니다. 앞서 언급했듯이, 우리는 이미 라이센스를 가지고 있으며 버전 5에는 이러한 SVG를 유지하기위한 요구 사항을 제거하지 않으며 제거 할 JS 및 Node 아이콘이 포함되어 있습니다.

그러나 4에서 5로 업그레이드하는 것과 관련된 주요 변경 사항이 있습니다. 공식 업그레이드 shim을 빠른 수정으로 사용할 수 있지만 향후 "올바르게"업그레이드 할 때까지 약간의 노력 만 절약 할 수 있습니다.

Font Awesome 업그레이드에 대해 새로운 문제를 제기해야합니까? 버전 5를 구현하기 위해 선택할 수있는 몇 가지 옵션이 있으며 FCC의 요구에 가장 적합한 일부 입력에 적합합니다. Ionic을 제거하는 데 방해가 될 수 있지만 내 마음에 FA를 업그레이드하는 것이 먼저 해결하는 것이 더 좋습니다.

안녕하세요 @hctpscl

아시다시피이 저장소와 학습 플랫폼 인 학습 저장소 내의 종속성을 바꾸고 싶습니다.

도움이 필요하면 저와 연결할 수 있습니다.

PR은 사물과 변화의 기술적 측면을 논의하기에 좋은 곳입니다.

빠진 유일한 것은 D3 로고입니다. 그러나 이는 공식 D3 자산 저장소에서 SVG로도 제공됩니다.