Bootstrap 4-Glyphicons迁移? [英] Bootstrap 4 - Glyphicons migration?

问题描述

我们有一个项目大量使用字形图标. 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/

推荐答案

您可以同时使用字体很棒和 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-下载文件Awesome/tree/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";

$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";

$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

Glyphicons

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

On the Bootstrap website you can read:

包括来自Glyphicon Halflings集的超过250种字体格式的字形.通常不会免费提供Glyphicons Halflings，但其创建者已使它们免费提供给Bootstrap.谢谢，我们只要求您在可能的情况下包括指向Glyphicons的链接.

Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.

据我了解，您可以免费使用这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. 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需要帖子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.

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

You can find out more about mixing with the Bootstrap 4 SCSS in here.

您还可以使用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.

对于真棒字体"，将以下代码粘贴到您网站的HTML的<head>部分:

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应用，以测试Bootstrap 4与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迁移?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！