Bootstrap 4 – 字形迁移？
我们有一个集中使用glyphicons的项目。 Bootstrap v4完全删除了字形字体。
Bootstrap V4附带的图标是否有相同的图标？
http://v4-alpha.getbootstrap.com/migration/
您可以使用Font Awesome和Github Octicons作为Glyphicons的免费替代品。
Bootstrap 4也从Less切换到Sass，所以你可以将字体的Sass（SCSS）整合到你的构build过程中，为你的项目创build一个单独的CSS文件。
另请参阅http://v4-alpha.getbootstrap.com/getting-started/build-tools/以了解如何设置您的工具：;
- 下载并安装Node，我们用它来pipe理我们的依赖关系。
- 使用npm install -g grunt-cli安装Grunt命令行工具grunt-cli。
- 导航到root / bootstrap目录并运行npm install来安装package.json中列出的本地依赖项。
- 安装Ruby，使用gem install bundler安装Bundler，最后运行bundle。 这将安装所有的Ruby依赖项，例如Jekyll和Sass linter。
字体真棒
- 在https://github.com/FortAwesome/Font-Awesome下载文件;
- 将
font-awesome/scss文件夹复制到/ bootstrap文件夹中 - 打开你的scss /bootstrap/bootstrap.scss，在这个文件的末尾写下下面的SCSS代码：
$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设置的任何其他公用文件夹 - 运行：
grunt dist用Font-Awesome重新编译你的代码
Github Octicons
- 在https://github.com/github/octicons/下载这些文件;
- 将
octicons文件夹复制到/ bootstrap文件夹中 - 打开你的scss /bootstrap/bootstrap.scss，在这个文件的末尾写下下面的SCSS代码：
$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设置的任何其他公用文件夹 - 运行：
grunt dist用Octicons重新编译你的代码
请注意，引导4需要后CSS autoprefixer进行编译。 当你使用一个静态的Sass编译器来编译你的CSS时，你需要运行autoprefixer。
您也可以使用Bower安装上面的字体。 使用Bower Font Awesome将文件安装在bower_components/components-font-awesome/同时注意Github Octicons将octicons/octicons/octicons-.scss .scss设置为主文件，同时使用octicons/octicons/sprockets-octicons.scss 。
以上所有将编译所有的CSS代码包括到一个文件中，只需要一个http请求。 另外，你也可以从CDN载入Font-Awesome字体，在很多情况下也可以很快。 CDN上的两种字体都包含字体文件（使用data-uri，旧版浏览器可能不支持）。 因此，请考虑哪种解决scheme最适合您的情况，取决于其他浏览器支持。
对于字体真棒将以下代码粘贴到您的网站的HTML的部分：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
也可以尝试使用Yeoman生成器来搭build一个前端的Bootstrap 4 Web应用程序来testing带有Font Awesome或Github Octicons的Bootstrap 4。
Glyphicons
在Bootstrap网站上，您可以阅读：
包含Glyphicon Halflings集合中超过250种字体格式的字形。 Glyphicons Halflings通常不是免费的，但他们的创造者已经使它们免费提供Bootstrap。 作为一个感谢，我们只要求你在可能的时候包含一个链接到Glyphicons的链接。
据我所知，你可以使用这些250个字形免费的Bootstrap成本限制，但不限于版本3独家。 所以你也可以把它们用于Bootstrap 4。
- 复制字体文件： https ： //github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
- 将https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss文件复制到您的;
bootstrap/scss文件夹中 -
打开你的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"; -
运行：
grunt dist重新编译您的代码与graphics
从Glyphicons迁移到Font Awesome是相当容易的。
包括对Font Awesome的引用（在本地或使用CDN）。
<link href="font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
然后运行search并replacesearch“glyphicon glyphicon-”的位置，并将其replace为“fa fa”。 大部分的CSS类名都是一样的。 有些已经改变，所以你必须手动修复这些。
Bootstrap 3中的glyphicons.less文件在GitHub上可用。 https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less
它需要这些variables：
@icon-font-path: "../fonts/"; @icon-font-name: "glyphicons-halflings-regular"; @icon-font-svg-id: "glyphicons_halflingsregular";
然后，您可以将.less文件转换为可以直接使用的.css文件。 你可以在less2css.org网上做到这一点 。 在这里我已经为你做了 ，保存为glyphicons.css并将其包含在你的HTML文件中。
<link href="/Content/glyphicons.css" rel="stylesheet" />
您还需要Bootstrap 3软件包中的Glyphicon字体，将它们放在/ fonts /目录中。
现在你可以像往常一样继续使用带有Bootstrap 4的Glyphicons。
