v4

v4

关注
发信
关注(28)粉丝(399)

Bootstrap 4 - Glyphicons 迁移?

本文介绍了Bootstrap 4 - Glyphicons 迁移?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我们有一个大量使用字形的项目.Bootstrap v4 完全删除了 glyphicon 字体.

We have a project that uses glyphicons intensively.Bootstrap v4 drops the glyphicon font altogether.

是否有与 Bootstrap V4 附带的图标等效的图标?

Is there an equivalent for icons shipped with Bootstrap V4?

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

推荐答案

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

You can use both Font Awesome and Github Octicons as a free alternative for Glyphicons.

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

Bootstrap 4 also switched from Less to Sass, so you might integerate the font's Sass (SCSS) into you build process, to create a single CSS file for your projects.

另见https://getbootstrap.com/docs/4.1/getting-started/build-tools/ 以了解如何设置您的工具:

Also see https://getbootstrap.com/docs/4.1/getting-started/build-tools/ to find out how to set up your tooling:

  1. 下载并安装用于管理依赖项的 Node.
  2. 导航到 /bootstrap 根目录并运行 npm install 以安装 package.json 中列出的本地依赖项.
  3. 安装Ruby，使用gem install bundler 安装Bundler，最后运行bundle install.这将安装所有 Ruby 依赖项，例如 Jekyll 和插件.
  1. Download and install Node, which we use to manage our dependencies.
  2. Navigate to the root /bootstrap directory and run npm install to install our local dependencies listed in package.json.
  3. Install Ruby, install Bundler with gem install bundler, and finally run bundle install. This will install all Ruby dependencies, such as Jekyll and plugins.

字体很棒

  1. 在 https://github.com/FortAwesome/Font- 下载文件真棒/树/fa-4
  2. 将 font-awesome/scss 文件夹复制到/bootstrap 文件夹中

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

  1. Download the files at https://github.com/FortAwesome/Font-Awesome/tree/fa-4
  2. Copy the font-awesome/scss folder into your /bootstrap folder

  3. Open your SCSS /bootstrap/bootstrap.scss and write down the following SCSS code at the end of this file:

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

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

Notice that you also have to copy the font file from font-awesome/fonts to dist/fonts or any other public folder set by $fa-font-path in the previous step

Github Octicons

  1. 在 https://github.com/github/octicons/
  2. 将 octicons 文件夹复制到您的 /bootstrap 文件夹中

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

  1. Download the files at https://github.com/github/octicons/
  2. Copy the octicons folder into your /bootstrap folder

  3. Open your SCSS /bootstrap/bootstrap.scss and write down the following SCSS code at the end of this file:

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

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

Notice that you also have to copy the font file from font-awesome/fonts to dist/fonts or any other public folder set by $fa-font-path in the previous step

字形

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

On the Bootstrap website you can read:

包括来自 Glyphicon Halflings 集的 250 多个字体格式的字形.Glyphicons Halflings 通常不是免费提供的，但他们的创建者已将它们免费提供给 Bootstrap.为表示感谢，我们只要求您尽可能提供返回 Glyphicons 的链接.

据我所知，您可以免费使用这 250 个字形，仅限于 Bootstrap，但不限于第 3 版独有.因此，您也可以将它们用于 Bootstrap 4.

As I understand you can use these 250 glyphs free of cost restricted for Bootstrap but not limited to version 3 exclusive. So you can use them for Bootstrap 4 too.

  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 代码:
  1. Copy the fonts files from: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
  2. Copy the https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss file into your bootstrap/scss folder
  3. Open your scss /bootstrap/bootstrap.scss and write down the following SCSS code at the end of this file:
$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";
  1. 运行:npm run dist 用 Glyphicons 重新编译你的代码
  1. Run: npm run dist to recompile your code with Glyphicons

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

Notice that Bootstrap 4 requires the post CSS Autoprefixer for compiling. When you are using a static Sass compiler to compile your CSS you should have to run the Autoprefixer afterwards.

您可以在此处.

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

You can also use Bower to install the fonts above. Using Bower Font Awesome installs your files in bower_components/components-font-awesome/ also notice that Github Octicons sets the octicons/octicons/octicons-.scss as the main file whilst you should use octicons/octicons/sprockets-octicons.scss.

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

All the above will compile all your CSS code including into a single file, which requires only one HTTP request. Alternatively you can also load the Font-Awesome font from CDN, which can be fast too in many situations. Both fonts on CDN also include the font files (using data-uri's, possible not supported for older browsers). So consider which solution best fits your situation depending on among others browsers to support.

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

For Font Awesome paste the following code into the <head> section of your site's HTML:

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

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

Also try Yeoman generator to scaffold out a front-end Bootstrap 4 Web app to test Bootstrap 4 with Font Awesome or Github Octicons.

这篇关于Bootstrap 4 - Glyphicons 迁移?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-16 00:22
Powered by LMLPHP ©2024 v4 0.036229