police666 / bootstrap4-glyphicons

Bootstrap 4 字体图标支持

维护者

详细信息

github.com/Police666/bootstrap4-glyphicons

来源

问题

安装: 16

依赖项: 0

建议者: 0

安全性: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

dev-master 2018-12-05 21:03 UTC

MIT d9542f4d8f1a16fb565748ad373b16f1d2061a1b

  • Police <plotnik-sergey.woop@yandex.ru>

This package is not auto-updated.

Last update: 2024-09-20 23:58:02 UTC

README

如何使用 Bootstrap 4 中的图标字体（避免生气）

有关更多信息及示例，请阅读官方页面。

简介

如果您偶然发现了这个项目，您可能已经熟悉了 Bootstrap，这是一款获奖的全球知名开源工具包，用于使用 HTML、CSS 和 JS 进行开发。实际上，您可能正在努力尝试从 Bootstrap 3 切换到 Bootstrap 4。在许多变化中（大多总结在官方迁移指南），有一个选择就是删除图标字体 Glyphicons。

如果您需要图标，Bootstrap 团队建议以下替代方案：

如果您正在迁移基于 Bootstrap 3 的现有网站，第一个选项绝对是最可行的。但是，Glyphicons Basic 集合（免费提供的）并没有涵盖 Bootstrap 中所有可用的图标，该开源工具包被授予使用 Halflings 集合的许可权（只要他们提供链接和致谢信息）。

现在，由于 Bootstrap 4 不再提供 Halflings 集合，如果您想使用该集合，可能需要付费：如果您不想，您基本上被迫从 Glyphicons 迁移到一个可行的开源替代方案，如上述的 Octicons 和 Font Awesome - 后者是一个个人选择，因为其免费集足够用于大多数项目。但是，这无疑需要重写大量的 HTML 代码，因为您必须手动进行映射，如下所示

<span class="glyphicons glyphicons-home"></span>
<span class="glyphicons glyphicons-plus-sign"></span>
<span class="glyphicons glyphicons-hand-left"></span>

到如下所示（以 FontAwesome 为例）

<span class="fas fa-home"></span>
<span class="fas fa-plus-circle"></span>
<span class="fas fa-hand-point-left"></span>

... 等等。不幸的是，正如您可能看到的，图标名称也可能相当不同，因此无法轻易进行搜索和替换。

替代方案

如果您正在构建一个全新的项目，我强烈建议删除 Glyphicons 包，并将其迁移到 FontAwesome：您不仅会有更多的图标，还有机会无缝地将字体图标切换到 SVG 图标，这是您几乎永远不会后悔的事情（如果您不知道原因，请阅读这里）。

但是，如果您正在处理一个大量使用 Glyphicons Halflings 集合的现有项目，您可以安装包含两个可行解决方案的此包。

安装

此包可以用两种替代方式使用：**Bootstrap 4+3** 和 **FontAwesome 映射**。

方法 #1：Bootstrap 4+3

此解决方案利用了您可以在没有任何问题的同时使用 Bootstrap 3.x，只要您只获取“glyphicon 部分”。您不会遇到任何许可问题，因为您实际上在使用 Bootstrap 3。

要实施此解决方案，请将包安装到您的网站上，并在 <head> 元素中添加以下内容

<link href="/bootstrap4-glyphicons/css/bootstrap-glyphicons.min.css" rel="stylesheet" type="text/css" />

就是这样。

方法 #2：FontAwesome 映射

由于任何Glyphicon图像都有（或多或少）相应的FontAwesome等价物，我们可以将各种glyphycons* CSS类映射到它们的fa*等价物。这正是你可以在/maps/glyphicons-fontawesome.less中找到的文件的目的，它将作为Glyphicon和FontAwesome之间透明的映射桥梁。

要实施此解决方案，请将包安装到您的网站上，并在 <head> 元素中添加以下内容

<link href="/bootstrap4-glyphicons/maps/glyphicons-fontawesome.min.css" rel="stylesheet" type="text/css" />

这里唯一的注意事项是，你必须使用基于字体的图标而不是上面的SVG替代品，但如果你是Glyphicon用户，你不会受到影响：你不喜欢“新”图标的机会要高得多。如果你有这种感觉，只需实现Bootstrap 4+3的替代方案即可。

作者

许可证

本项目采用Apache 2.0许可证授权 - 详细内容请参阅LICENSE.md文件。