Freecodecamp: Replace Ionic icons with their Font Awesome equivalents and remove Ionic as a dependency

@QuincyLarson I can try this one!
Although we can add svg's instead of font icon's, and remove font awesome as a dependency too.

we can add svg's instead of font icon's

Do you mean we create and maintain those assets?

yes, right now we do that for D3.js image,
I think we may get svg's under CC license from various site or even copy right free.
And many people suggest that one should not use Icon fonts instead should use svg's from accessibility perspective (like bootstrap 4 is dropping icons and moving to svg).

FontAwesome 5 is also going to offer all SVG icons, that's a a huge cost saving that creating and maintaining a icon-set ourselves.

And a big bonus is that, they have all of the icons including our icon the fa-free-code-camp as of 4.7.0

And as I said this would be coming for free (as SVG) to the next major version anyways, with backword compatibility.

For now I believe we should simple focus on the issue of moving away from ionic icons to font-awesome which we already have as dependency.

@BhaveshSGupta I agree with @raisedadead that we should just use Font Awesome which is an excellent library. We don't need to reinvent the wheel.

We would love your help with this. Would you be interested in working on this? If so, could you give us regular status updates so we can know how things are progressing?

@QuincyLarson Sure Let me see that tonight.

hey @QuincyLarson, @raisedadead
These are all Ionic icons icons I could find, I have marked equivalent font awesome icons. If any need to change then let me know.

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

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

Couldn't find any icons for the following.
.ion-social-javascript (home.jade)
.ion-social-nodejs (home.jade)

The addition of NodeJS icon to FA library is pending since Dec 2013, Issue #2584. I couldn't find an issue for the JS icon. I went ahead and took the liberty of converting the above two icons into icon fonts using Fontello and Ion Icon SVGs.

I reckon that even if we switch to FA icons completely, there will be a need for custom icons and hence we should maintain a custom FCC icon font.

Icon SVGs.zip

fontello-7ce4e099.zip

@BhaveshSGupta excellent list! Yes - do you have time to make these substitutions yourself so you can get credit for this in the Git history?

@iHarshad Yes - I agree that we should include our own SVG images where Font Awesome is lacking. This will be much smaller than including Ionic for just a few icons.

@QuincyLarson sure why not I would love to do that,
and if we want use custom kit we can use something like icomoon.io where we can add font awesome fonts and custom font and create a single kit with only required icons

@BhaveshSGupta Yes we could try that. I could also just take the handful of specific SVG files we need and put them in S3. They aren't very big - just a few kilobytes each :)

@QuincyLarson I think @BhaveshSGupta has made a good suggestion here.

Instead of loading the whole Font Awesome library, we could use something like Fontello to pick icons from wherever we need and upload the generated files to S3. I've used that in several of my projects and it's a very simple process.

@dakshshah96 OK - but if I understand correctly, I think we will want to load the entire Font Awesome library anyway because @BerkeleyTrue is building a JSBin-like editor, and we'll want campers to be able to use Font Awesome in there.

Dear Sir,

Wait to my contributor of seven garden typodeart.

Regards
On Jun 22, 2017 6:02 AM, "Quincy Larson" notifications@github.com wrote:

@dakshshah96 https://github.com/dakshshah96 OK - but if I understand
correctly, I think we will want to load the entire Font Awesome library
anyway because @BerkeleyTrue https://github.com/berkeleytrue is
building a JSBin-like editor, and we'll want campers to be able to use Font
Awesome in there.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310217649,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALc8XLcX7m38iuBq7htBigFEqOI5lFR6ks5sGZLggaJpZM4MWGCb
.

@QuincyLarson I see, then we will need Font Awesome.

However, there's an alternative. Maybe we could let campers insert a script tag instead of including Font Awesome site-wide even though it's needed just on the editor being built?

In icomoon we can add whole font awesome along with custom icons I have
doing this to many projects, not only font awesome but there few other free
kits.

On Thu 22 Jun, 2017, 3:38 AM Daksh Shah, notifications@github.com wrote:

@QuincyLarson https://github.com/quincylarson I see, then we will need
Font Awesome.

However, there's an alternative. Maybe we could let campers insert a
script tag instead of including Font Awesome site-wide even though it's
needed just on the editor being built?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310218975,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEA75e44KO5ivCcTCHyHEFTNu9LfGlN7ks5sGZQ8gaJpZM4MWGCb
.

@BhaveshSGupta would it affect the syntax that campers use to add Font Awesome icons to their coding challenges and projects on freeCodeCamp?

@QuincyLarson There would be a small change that would be instead of fa fa-search they need to use icon-search. I need to see if there is a way we can avoid this, meanwhile you can check out icomoon.io if you get some free time

font-awesome just announced that they are in alpha, and should be in public beta by next month on their Kickstarter.

They are going to release the SVG framework as OSS for everybody, for use as making custom icons.

We wouldn't need any additional libraries or dependencies except for FA.

@raisedadead thanks for the heads-up. @BhaveshSGupta Since we're already using Font Awesome for all our icons (or at least, we will be once we get rid of the remaining Ionic icons) I propose we wait for Font Awesome to release it, and we can just use static SVG files as necessary for now (I can host them in an S3 folder)

@QuincyLarson I would update iconic as per this, Although I would need alternates for .ion-social-javascript (home.jade)
.ion-social-nodejs (home.jade)

@BhaveshSGupta Awesome! Here's the JS logo in SVG (thought we would want to center it and make it bigger - do you know how to do that?

Here's Node logo - you'll need to download it and make it monochrome: https://seeklogo.com/vector-logo/273749/node-js

Please let me know if I can be of any further help with these :)

@BhaveshSGupta here are the above logos edited as @QuincyLarson mentioned. I used VectorPaint to make changes and removed the branding metadata.

Edited JS SVG Logo - https://goo.gl/xP72mF
Edited Node SVG Logo - https://goo.gl/dN4i2M

@iHarshad Looks awesome, @QuincyLarson I am keeping these in public/images folder as of now

@BhaveshSGupta @iHarshad It would be great if you can add these to the freeCodeCamp/assets repo as well via a PR.

@raisedadead Sure, would add these in assets repo too.

@iHarshad your new logos look great! Thank you for making these.

You might consider open a pull request to Font Awesome with these. They may not accept them, but it may speed up their work to get standard versions of these icons into their library :)

@raisedadead @BhaveshSGupta @iHarshad Do you know whether we can indeed switch over to pulling in SVG files? I think that would be much faster than loading the Font Awesome library.

We want to get this initial page load speed faster, and I think loading only SVGs we need can get us a big part of the way there :)

You might consider open a pull request to Font Awesome with these.

On FA 4 they are not accepting any PRs for the moment for the icon requests. If you would like then you would need access to the FA 5 repo. Unfortunately its private in beta.

Do you know whether we can indeed switch over to pulling in SVG files? I think that would be much faster than loading the Font Awesome library.

Are we talking about just the home page?
Here is the lighthouse report with suggestions for improvement.

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

As @raisedadead pointed out issues with using FA4 and FA5, we could use an image sprite sheet (reference) for our custom icons which are not supported by FA.

What do you all think?

The page speeds have nothing to do with FA and rather unoptimized CSS as a whole. @QuincyLarson I think we should rather track that on a separate thread.

@raisedadead agreed. Could you create a separate issue that explains these issues - preferably with a checklist of things we can do to optimize our CSS?

@QuincyLarson sure, I will as soon as we have the new layout in place and consolidate.

I closed this issue in error - this is still something we actively want to accomplish. Updating labels accordingly.

@BhaveshSGupta Are you still interested in helping us update these icons?

@QuincyLarson yes I am in.

@BhaveshSGupta Awesome! Let me know if I can do anything to help.

@QuincyLarson finally here we would be replacing as per this and would be using svg images which are provided by @iHarshad as per this and would also add this images to freeCodeCamp/assets as per @raisedadead

@BhaveshSGupta That is perfectly correct!

@BhaveshSGupta Yes, exactly.

I'm happy to report that thanks to @raisedadead, freeCodeCamp now has a license to use Font Awesome 5.0! Thanks, man!

I don't see these publicly visible yet, but here are the 4.7 icons: http://fontawesome.io/icons/

@BhaveshSGupta send me a message in Gitter and I'll give you the 5.0 icon file (since I think you're planning to export the ones we want to a separate set of files, so we can create our own CDN for them).

@QuincyLarson Hey, I have texted you over gitter, pass me the file when your are free

@QuincyLarson ofcourse happy to be able to assist on that!

@BhaveshSGupta thanks for helping us in the effort.
Also, needless to say, that we will be adding a minified production version of the icons over on S3, so just make sure you do not commit the source files (which are NOT for distribution and for development only).

Hit me up for any assistance.

Hi @BhaveshSGupta could you give us a quick update on how this is going?

@QuincyLarson For now we can just removed ionic dependence by making changes listed here and using images listed here. For this if you can host this files on S3 and give me the link for same it won't take much time to do other changes.

@QuincyLarson and others interested

Happy to announce that Font Awesome has now released the the version 5.0.0
It has all the icons that we need.

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

So, we would not be needing any maintenance of the icons (SVG, etc) at our end.

Hence the migration is as good as adding the deps on the new packages as documented on official docs above.

I have started some work over here at my fork. Feel free to push to it via pull request.

staging...raisedadead:feat/upgrade-fontawesome

@raisedadead Awesome! Are you're sure it has everything we need? For example, I couldn't find a D3 icon in there, and we use it for our landing page. We may have to keep a few SVG files, but I'm confident we can get rid of the redundant Ionic icon library :)

I have opened an official request

For now we could use the official logo (available as SVG)
https://github.com/d3/d3-logo

@raisedadead OK - that would be great. Note that it took more than a year and hundreds of +1's on the GitHub issue before the Font Awesome team added the freeCodeCamp logo, so it may take a long time.

We are currently already using the official D3 logo on the landing page so we don't need to change anything. I was just pointing out that we will still need some SVG files in addition to the icons provided by Font Awesome.

I believe Ionic is still a dependency. Would anyone be interested in helping remove this icon library from the repo and replacing icons with their Font Awesome equivalents?

Hey @QuincyLarson, I'd like to take a look at this!

Okay, looks like @bhaveshsgupta and @raisedadead have done most of the heavy lifting already.

We are still on Font Awesome v4.7. It would be great to update to 5.0; as noted earlier, we already have a license, and version 5 includes the JS and Node icons that 4 does not and would remove the requirement to maintain those SVGs.

However, there are breaking changes involved in upgrading from 4 to 5. We could use the official upgrade shim as a quick fix, but it only saves us a small amount of effort until we upgrade "properly" in the future.

Should I raise a new issue for the Font Awesome upgrade? There are a few options to choose from for implementing version 5 and it would be nice for some input on which is the best for FCC's needs. It might be a blocker for removing Ionic but to my mind upgrading FA would be the better thing to tackle first.

Hi @hctpscl

Just so that you know, we would like to replace the dependencies within this repo and the learn repo which is our learning platform.

You can connect with me if you need any assistance.

A PR would be good place to discuss the technical side of things and changes though.

The only thing that is missing is the D3 logo. But that is also available as an SVG on the official D3 assets repo.