Freecodecamp: 用其Font Awesome等效项替换Ionic图标，并删除Ionic作为依赖项

@QuincyLarson我可以试试这个！
尽管我们可以添加svg而不是字体图标，并删除令人敬畏的字体作为依赖项。

我们可以添加svg而不是字体图标

您是说我们创建并维护这些资产吗？

是的，现在我们针对D3.js图片执行此操作，
我认为我们可能会从各个站点获得CC许可下的svg，甚至可以免费复制。
许多人建议从可访问性的角度来看，不应使用Icon字体，而应使用svg（例如引导程序4正在删除图标并移至svg）。

FontAwesome 5也将提供所有SVG图标，这可以节省大量成本，您可以自己创建和维护图标集。

而且最大的好处是，它们具有所有图标，包括我们的图标fa-free-code-camp截至4.7.0

就像我说的那样，它将免费（作为SVG）提供到下一个主要版本，并且具有Backword兼容性。

到目前为止，我相信我们应该简单地集中精力解决从离子图标过渡到字体（真棒）的问题，而字体已经成为我们的依赖。

@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-圈到.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卡（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）

自2013年12月，版本＃2584以来，向FA库中添加NodeJS图标的工作尚在等待中。 我找不到JS图标的问题。 我继续自由地使用Fontello和Ion Icon SVG将上述两个图标转换为图标字体。

我认为即使我们完全切换到FA图标，也将需要自定义图标，因此我们应该维护自定义FCC图标字体。

图标SVGs.zip

fontello-7ce4e099.zip

@BhaveshSGupta优秀列表！ 是的-您是否有时间自己进行替换，以便您可以在Git历史中获得荣誉？

@iHarshad是-我同意我们应该在缺少Font Awesome的地方添加自己的SVG图像。 这将比仅包含几个图标的Ionic小得多。

@QuincyLarson确定我为什么不愿意这样做，
如果我们要使用自定义工具包，则可以使用icomoon.io之类的东西，在其中可以添加字体很棒的字体和自定义字体，并创建仅包含必需图标的单个工具包

@BhaveshSGupta是的，我们可以尝试一下。 我也可以只提取一些我们需要的特定SVG文件，并将它们放在S3中。 它们不是很大-每个都只有几千字节:)

@QuincyLarson我认为@BhaveshSGupta在这里提出了一个很好的建议。

除了加载整个Font Awesome库之外，我们还可以使用Fontello之类的

@ dakshshah96好的-但是，如果我理解正确的话，我想我们还是要加载整个Font Awesome库，因为@BerkeleyTrue正在构建类似JSBin的编辑器，我们希望露营者能够在其中使用Font Awesome。

亲爱的先生，

等待我的七个花园拼写作者的贡献。

问候
在2017年6月22日上午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中，我们可以添加很棒的整个字体以及我拥有的自定义图标
对许多项目都这样做，不仅字体很棒，而且还有其他免费字体
套件。

在Daksh Shah，2017年6月22日星期四凌晨3：38， notifications @ github.com写道：

我看到了@QuincyLarson https://github.com/quincylarson ，那么我们将需要
字体真棒。

但是，还有另一种选择。 也许我们可以让露营者插入一个
脚本标记，而不是在整个网站范围内都包括Font Awesome
只需要在正在构建的编辑器上？

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件，在GitHub上查看
https://github.com/freeCodeCamp/freeCodeCamp/issues/13798#issuecomment-310218975 ，
或使线程静音
https://github.com/notifications/unsubscribe-auth/AEA75e44KO5ivCcTCHyHEFTNu9LfGlN7ks5sGZQ8gaJ​​pZM4MWGCb
。

@BhaveshSGupta会影响营员用来在FreeCodeCamp上的编码挑战和项目中添加Font Awesome图标的语法吗？

@QuincyLarson将会有一个小的变化，他们需要使用图标搜索来代替fa-search。 我需要看看是否有一种方法可以避免这种情况，同时如果您有空闲时间，可以查看icomoon.io

font-awesome刚刚宣布它们为Alpha，并且应该在下个月的Kickstarter上公开发布Beta。

他们将向所有人发布SVG框架作为OSS，用作制作自定义图标。

除了FA之外，我们不需要任何其他库或依赖项。

@raisedadead感谢您的单挑。 @BhaveshSGupta因为我们已经对所有图标使用了Font Awesome（或者至少，一旦我们摆脱了剩下的Ionic图标，我们将立即使用），我建议我们等待Font Awesome释放它，我们可以只使用静态SVG现在需要的文件（我可以将它们托管在S3文件夹中）

@QuincyLarson我将按照此更新图标，尽管我需要.ion-social-javascript（home.jade）的替代项
.ion-social-nodejs（home.jade）

@BhaveshSGupta太棒了！ 这是SVG中的

这是Node徽标-您需要下载它并将其设置为单色： https ：

请让我知道我是否可以在这些方面提供更多帮助:)

@BhaveshSGupta这是上面编辑为@QuincyLarson的上述徽标。 我使用VectorPaint进行了更改，并删除了品牌元数据。

编辑的JS SVG徽标-https: //goo.gl/xP72mF
编辑的节点SVG徽标-https: //goo.gl/dN4i2M

@iHarshad看起来很棒， @ QuincyLarson我现在将它们保存在public / images文件夹中

@BhaveshSGupta @iHarshad如果您也可以通过PR将它们添加到freeCodeCamp / assets

@raisedadead当然，也将这些添加到资产回购中。

@iHarshad您的新徽标看起来很棒！ 谢谢你做这些。

您可能会考虑使用这些请求向Font Awesome打开一个拉取请求。 他们可能不接受它们，但是可以加快工作速度，以将这些图标的标准版本添加到他们的库中：）

@raisedadead @BhaveshSGupta @iHarshad您知道我们是否真的可以切换到拉入SVG文件吗？ 我认为这比加载Font Awesome库要快得多。

我们希望更快地获得

您可能会考虑使用这些请求向Font Awesome打开一个拉取请求。

在FA 4上，他们暂时不接受任何用于图标请求的PR。 如果您愿意，则需要访问FA 5仓库。 不幸的是，它是beta版的私有软件。

您知道我们是否真的可以切换到拉入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终于在这里，我们将更换为每本，并会使用它们由@iHarshad提供按SVG图像这，也将这个图像添加到freeCodeCamp /资产按@raisedadead

@BhaveshSGupta完全正确！

@BhaveshSGupta是的，完全是。

我很高兴地向您报告，感谢@raisedadead ，freeCodeCamp现在拥有使用Font Awesome 5.0的许可！ 谢啦！

我还没有看到这些图标，但是这里有4.7个图标： http :

@BhaveshSGupta在Gitter中给我发送了一条消息，我将给您5.0图标文件（因为我认为您计划将我们想要的文件导出到单独的文件集中，因此我们可以为它们创建自己的CDN）。

@QuincyLarson嘿，我发过短信给您发短信，有空时将文件传递给我

@QuincyLarson当然很高兴能够提供帮助！

@BhaveshSGupta感谢您的帮助。
另外，不用说，我们将在S3上添加图标的缩小版本，因此请确保您不提交源文件（这些文件不用于分发和开发）。

打我寻求任何帮助。

嗨@BhaveshSGupta ，您能给我们快速更新一下吗？

@QuincyLarson现在，我们可以通过进行此处列出的更改并使用此处列出的图像

@QuincyLarson和其他感兴趣的人

高兴地宣布Font Awesome现在已经发布了5.0.0版本
它具有我们需要的所有图标。

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

因此，我们最后不需要维护图标（SVG等）。

因此，迁移与在上面官方文档中所述的在新软件包上添加dep一样好。

我在这里开始了一些工作。 通过拉取请求随意将其推入。

staging...raisedadead:feat/upgrade-fontawesome

@raisedadead太棒了！ 您确定它具有我们需要的一切吗？ 例如，我在那里找不到D3图标，我们将其用于登录页面。 我们可能需要保留一些SVG文件，但是我相信我们可以摆脱多余的Ionic图标库：）

我已提出正式要求

目前，我们可以使用官方徽标（以SVG形式提供）
https://github.com/d3/d3-logo

@raisedadead好-太好了。 请注意，在Font Awesome团队添加freeCodeCamp徽标之前，在GitHub问题上花费了一年多的时间，并获得了数百次+1，因此可能需要很长时间。

目前，我们已经在目标网页上使用了官方的D3徽标，因此我们无需进行任何更改。 我只是指出，除了Font Awesome提供的图标外，我们仍然需要一些SVG文件。

我相信Ionic仍然是一个依赖。 有谁有兴趣帮助从存储库中删除此图标库，并用其等效的Font Awesome替换图标？

嘿@QuincyLarson ，我想看看这个！

好的，看起来@bhaveshsgupta和@raisedadead已经完成了大部分繁重的工作。

我们仍在使用Font Awesome v4.7。 更新到5.0太好了； 如前所述，我们已经有一个许可证，版本5包含JS和Node图标，而版本4则没有，并且将删除维护这些SVG的要求。

但是，从4升级到5涉及重大变化。我们可以使用官方升级shim作为快速解决方案，但这只会为我们节省少量精力，直到将来我们进行“适当”升级。

我应该为Font Awesome升级提出新问题吗？ 有一些实现版本5的选项可供选择，这对某些输入很有益，因为这最适合FCC的需求。 这可能是消除Ionic的障碍，但在我看来，升级FA将是首先解决的更好的方法。

嗨@hctpscl

众所周知，我们想替换此存储库和学习存储库（即我们的学习平台）中的依赖项。

如果您需要任何帮助，可以与我联系。

公关将是讨论事物和变化的技术方面的好地方。

唯一缺少的是D3徽标。 但这也可以作为官方D3资产回购中的SVG使用。