Bootstrap 4-Glyphicons迁移？

本文翻译自：Bootstrap 4 - Glyphicons migration?

We have a project that uses glyphicons intensively. 我们有一个项目大量使用字形图标。 Bootstrap v4 drops the glyphicon font altogether. Bootstrap v4完全删除了glyphicon字体。

Is there an equivalent for icons shipped with Bootstrap V4? Bootstrap V4随附的图标是否等效？

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

---

#1楼

参考：https://stackoom.com/question/2Cq38/Bootstrap-Glyphicons迁移

---

#2楼

You can use both Font Awesome and Github Octicons as a free alternative for Glyphicons. 您可以将Font Awesome和Github Octicons用作Glyphicons的免费替代品。

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. Bootstrap 4也从Less切换到Sass，因此您可以将字体的Sass（SCSS）整数化到构建过程中，从而为项目创建一个CSS文件。

Also see https://getbootstrap.com/docs/4.1/getting-started/build-tools/ to find out how to set up your tooling: 另请参阅https://getbootstrap.com/docs/4.1/getting-started/build-tools/以了解如何设置工具：

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

Font Awesome 字体很棒

1. Download the files at https://github.com/FortAwesome/Font-Awesome/tree/fa-4 在https://github.com/FortAwesome/Font-Awesome/tree/fa-4下载文件
2. Copy the font-awesome/scss folder into your /bootstrap folder 将font-awesome/scss文件夹复制到/ bootstrap文件夹中

3. Open your SCSS /bootstrap/bootstrap.scss and write down the following SCSS code at the end of this file: 打开您的SCSS /bootstrap/bootstrap.scss并在此文件的末尾写下以下SCSS代码：

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

4. 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 请注意，在上一步中，还必须将字体文件从font-awesome/fonts复制到dist/fonts或$fa-font-path设置的任何其他公共文件夹中

5. Run: npm run dist to recompile your code with Font-Awesome 运行： npm run dist使用Font-Awesome重新编译代码

Github Octicons Github Octicons

1. Download the files at https://github.com/github/octicons/ 在https://github.com/github/octicons/下载文件
2. Copy the octicons folder into your /bootstrap folder 将octicons文件夹复制到您的/bootstrap文件夹中

3. Open your SCSS /bootstrap/bootstrap.scss and write down the following SCSS code at the end of this file: 打开您的SCSS /bootstrap/bootstrap.scss并在此文件的末尾写下以下SCSS代码：

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

4. 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 请注意，在上一步中，还必须将字体文件从font-awesome/fonts复制到dist/fonts或$fa-font-path设置的任何其他公共文件夹中

5. Run: npm run dist to recompile your code with Octicons 运行： npm run dist用Octicons重新编译代码

Glyphicons 雕ly

On the Bootstrap website you can read: 在Bootstrap网站上，您可以阅读：

Includes over 250 glyphs in font format from the Glyphicon Halflings set. 包括来自Glyphicon Halflings集的超过250种字体格式的字形。 Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. Glyphicons Halflings通常不是免费提供，但其创建者已使它们免费提供给Bootstrap。 As a thank you, we only ask that you include a link back to Glyphicons whenever possible. 谢谢，我们只要求您在可能的情况下包括指向Glyphicons的链接。

As I understand you can use these 250 glyphs free of cost restricted for Bootstrap but not limited to version 3 exclusive. 据我了解，您可以免费使用这250个字形，但这些字形不受Bootstrap限制，但不限于第3版独占。 So you can use them for Bootstrap 4 too. 因此，您也可以将它们用于Bootstrap 4。

1. Copy the fonts files from: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap 从以下位置复制字体文件： 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 将https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss文件复制到bootstrap/scss文件夹中
3. Open your scss /bootstrap/bootstrap.scss and write down the following SCSS code at the end of this file: 打开您的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. Run: npm run dist to recompile your code with Glyphicons 运行： npm run dist使用Glyphicons重新编译代码

---

Notice that Bootstrap 4 requires the post CSS Autoprefixer for compiling. 请注意，Bootstrap 4需要Post CSS Autoprefixer进行编译。 When you are using a static Sass compiler to compile your CSS you should have to run the Autoprefixer afterwards. 当使用静态Sass编译器编译CSS时，您必须随后运行Autoprefixer。

You can find out more about mixing with the Bootstrap 4 SCSS in here . 您可以在此处找到有关与Bootstrap 4 SCSS混合的更多信息。

You can also use Bower to install the fonts above. 您也可以使用Bower安装上述字体。 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 . 使用Bower Font Awesome将文件安装在bower_components/components-font-awesome/还请注意Github Octicons将octicons/octicons/octicons-.scss .scss设置为主文件，而您应该使用octicons/octicons/sprockets-octicons.scss 。

All the above will compile all your CSS code including into a single file, which requires only one HTTP request. 以上所有内容将所有CSS代码（包括一个文件）编译到一个文件中，该文件仅需要一个HTTP请求。 Alternatively you can also load the Font-Awesome font from CDN, which can be fast too in many situations. 或者，您也可以从CDN加载Font-Awesome字体，这在许多情况下也可以很快。 Both fonts on CDN also include the font files (using data-uri's, possible not supported for older browsers). CDN上的两种字体也都包含字体文件（使用data-uri的字体，旧浏览器可能不支持）。 So consider which solution best fits your situation depending on among others browsers to support. 因此，请根据要支持的其他浏览器来考虑哪种解决方案最适合您的情况。

For Font Awesome paste the following code into the <head> section of your site's HTML: 对于Font Awesome，请将以下代码粘贴到您网站的HTML的<head>部分中：

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

Also try Yeoman generator to scaffold out a front-end Bootstrap 4 Web app to test Bootstrap 4 with Font Awesome or Github Octicons. 也可以尝试使用Yeoman生成器来构建前端Bootstrap 4 Web应用程序，以测试Font Awesome或Github Octicons的Bootstrap 4。

---

#3楼

The glyphicons.less file from Bootstrap 3 is available on GitHub. Bootstrap 3中的glyphicons.less文件可在GitHub上找到。 https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less

It needs these variables: 它需要以下变量：

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";
@icon-font-svg-id:        "glyphicons_halflingsregular";

Then you can convert the .less file to a .css file which you can use directly. 然后，您可以将.less文件转换为可以直接使用的.css文件。 You can do this online on lesscss.org/less-preview/ . 您可以在lesscss.org/less-preview/上在线进行此操作 。 Here I've done it for you , save it as glyphicons.css and include it in your HTML files. 在这里，我已经为您完成了此操作 ，将其另存为glyphicons.css并将其包含在您的HTML文件中。

<link href="/Content/glyphicons.css" rel="stylesheet" />

You also need the Glyphicon fonts which is in the Bootstrap 3 package, place them in a /fonts/ directory. 您还需要Bootstrap 3软件包中的Glyphicon字体，将它们放在/ fonts /目录中。

Now you can just keep on using Glyphicons with Bootstrap 4 as usual. 现在，您可以像往常一样继续在Bootstrap 4中使用Glyphicons。

---

#4楼

Migrating from Glyphicons to Font Awesome is quite easy. 从Glyphicons迁移到Font Awesome非常容易。

Include a reference to Font Awesome (either locally, or use the CDN). 包括对Font Awesome的引用（在本地或使用CDN）。

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

Then run a search and replace where you search for glyphicon glyphicon- and replace it with fa fa- . 然后运行搜索，并在搜索glyphicon glyphicon-替换glyphicon glyphicon-并将其替换为fa fa- 。 Most of the CSS class names are the same. 大多数CSS类名称是相同的。 Some have changed though, so you have to manually fix those. 不过，其中一些已更改，因此您必须手动修复它们。

---

#5楼

Overview: 概述：

I am using bootstrap 4 without glyphicons. 我正在使用没有字形图标的bootstrap 4。 I found a problem with bootstrap treeview that depends upon glyphicons. 我发现了依赖于字形的引导树视图存在问题。 I am using treeview as is, and I am using scss @extend to translate the icon class styles to font awesome class styles. 我按原样使用treeview，并且我使用scss @extend将图标类样式转换为超棒的字体样式。 I think this is quite slick (if you ask me)! 我认为这很漂亮（如果您问我）！

Details: 细节：

I used scss @extend to handle it for me. 我用scss @extend替我处理。

I previously decided to use font-awesome for no better reason than I have used it in the past. 我以前决定使用font-awesome的原因没有比过去使用过的更好。

When I went to try bootstrap treeview, I found that the icons were missing, because I didn't have glyphicons installed. 当我尝试引导树视图时，我发现图标丢失了，因为我没有安装字形图标。

I decided to use the scss @extend feature, to have the glyphicon classes use the font-awesome classes as so: 我决定使用scss @extend功能，以使glyphicon类像这样使用font-awesome类：

.treeview {
  .glyphicon {
    @extend .fa;
  }
  .glyphicon-minus {
    @extend .fa-minus;
  }
  .glyphicon-plus {
    @extend .fa-plus;
  }
}

---

#6楼

If you are using Laravel 5.6, it comes with Bootstrap 4. All you need to is: 如果您使用的是Laravel 5.6，则它随Bootstrap 4一起提供。您需要做的是：

npm install and npm install open-iconic --save

At /resources/assets/sass/app.scss change the line of of Google font import on line 2 to 在/resources/assets/sass/app.scss将第2行的Google字体导入行更改为

@import '~open-iconic/font/css/open-iconic-bootstrap';

All you need to do now is 您现在要做的就是

npm run watch

and include 并包括

<link rel="stylesheet" href="{{asset('css/app.css')}}">

on top of master blade file and <script src="{{asset('js/app.js')}}"></script> before closing body tag. 关闭主体标签之前，将其置于主刀片文件和<script src="{{asset('js/app.js')}}"></script>之上。 You will get Bootstrap 4 and icon. 您将获得Bootstrap 4和图标。

Usage is <span class="oi oi-cog"></span> 用法是<span class="oi oi-cog"></span>

Refer here for icon details: Open Iconic: Recommended by Bootstrap 4 请参阅此处以获取图标详细信息： 打开图标：由Bootstrap 4推荐

If on other project than Laravel, you can just do import @import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css'; 如果在Laravel以外的其他项目上，则可以只导入@import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css'; in your style file. 在您的样式文件中。

Hope this helps. 希望这可以帮助。 Happy trying. 尝试愉快。