1. 首页
  2. 问题
  3. Bootstrap 4 - Glyphicons 迁移？
小编典典

Bootstrap 4 - Glyphicons 迁移？

all

我们有一个大量使用字形图标的项目。Bootstrap v4 完全放弃了 glyphicon 字体。

Bootstrap V4 附带的图标是否有等价物？

变更日志

http://v4-alpha.getbootstrap.com/migration/


阅读 112

收藏
2022-04-04

共1个答案

小编典典

您可以使用Font Awesome和Github
Octicons作为 Glyphicons 的免费替代品。

Bootstrap 4 也从 Less 切换到 Sass，因此您可以将字体的 Sass (SCSS) 整合到构建过程中，为您的项目创建单个 CSS 文件。

另请参阅https://getbootstrap.com/docs/4.1/getting-started/build-
tools/了解如何设置工具：

  1. 下载并安装 Node，我们用它来管理我们的依赖项。
  2. 导航到根/bootstrap目录并运行npm install以安装 package.json 中列出的本地依赖项。
  3. 安装 Ruby，安装 Bundler gem install bundler，最后运行bundle install. 这将安装所有 Ruby 依赖项，例如 Jekyll 和插件。

字体真棒

  1. 在https://github.com/FortAwesome/Font-Awesome/tree/fa-4下载文件
  2. 将font-awesome/scss文件夹复制到 /bootstrap 文件夹中
  3. 打开您的 SCSS/bootstrap/bootstrap.scss并在此文件末尾写下以下 SCSS 代码：

$fa-font-path: "../fonts"; @import "../font-awesome/scss/font-awesome.scss";

  1. 请注意，您还必须将字体文件复制font-awesome/fonts到上一步中dist/fonts设置的任何其他公用文件夹$fa-font-path

  2. 运行：npm run dist使用 Font-Awesome 重新编译你的代码

Github Octicons

  1. 在https://github.com/github/occticons/下载文件
  2. 将octicons文件夹复制到您的/bootstrap文件夹中
  3. 打开您的 SCSS/bootstrap/bootstrap.scss并在此文件末尾写下以下 SCSS 代码：

$fa-font-path: "../fonts"; @import "../octicons/octicons/octicons.scss";

  1. 请注意，您还必须将字体文件复制font-awesome/fonts到上一步中dist/fonts设置的任何其他公用文件夹$fa-font-path

  2. 运行：npm run dist用 Octicons 重新编译你的代码

字形

在 Bootstrap 网站上，您可以阅读：

包括来自 Glyphicon Halflings 集的超过 250 个字体格式的字形。Glyphicons Halflings
通常不是免费提供的，但它们的创建者已免费为 Bootstrap 提供了它们。为表示感谢，我们只要求您尽可能提供指向 Glyphicons 的链接。

据我了解，您可以免费使用这 250 个字形，仅限于 Bootstrap，但不限于版本 3 独有。所以你也可以将它们用于 Bootstrap 4。

  1. 从以下位置复制字体文件：https ://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
  2. 将https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss文件复制到您的bootstrap/scss文件夹中

  3. 打开您的 scss /bootstrap/bootstrap.scss 并在此文件末尾写下以下 SCSS 代码：

    $bootstrap-sass-asset-helper: false;
    $icon-font-name: ‘glyphicons-halflings-regular’;
    $icon-font-svg-id: ‘glyphicons_halflingsregular’;
    $icon-font-path: ‘../fonts/’;
    @import “glyphicons”;

  4. 运行：npm run dist使用 Glyphicons 重新编译您的代码

请注意，Bootstrap 4 需要使用 post CSS
Autoprefixer进行编译。当您使用静态 Sass 编译器编译
CSS 时，您应该必须在之后运行 Autoprefixer。

您可以在此处找到有关与
Bootstrap 4 SCSS 混合的更多信息。

你也可以使用 Bower 来安装上面的字体。使用 Bower Font Awesome
会安装您的文件，bower_components/components-font-awesome/同时请注意 Github Octicons 将
设置octicons/octicons/octicons-.scss为主文件，而您应该使用octicons/octicons/sprockets- octicons.scss.

以上所有内容都会将您的所有 CSS 代码编译成一个文件，该文件只需要一个 HTTP 请求。或者，您也可以从 CDN 加载 Font-Awesome
字体，这在许多情况下也很快。CDN 上的两种字体还包括字体文件（使用 data-
uri，可能不支持旧浏览器）。因此，根据要支持的其他浏览器，考虑哪种解决方案最适合您的情况。

对于 Font Awesome，将以下代码粘贴到<head>您网站的 HTML 部分：

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

还可以尝试使用 Yeoman 生成器搭建前端 Bootstrap 4 Web
应用程序，以使用 Font Awesome 或
Github Octicons 测试 Bootstrap 4。

2022-04-04