Bootstrap 4-字形子迁移？

提问者：小点点

Bootstrap 4-字形子迁移？

我们有一个集中使用字形的项目。 Bootstrap v4完全删除字形字体。

Bootstrap v4中是否有类似的图标？

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

共3个答案

匿名用户

您可以同时使用Font Awesome和Github Octicons作为字形的免费替代。

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

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

下载并安装节点，用于管理依赖项。
导航到根/bootstrap目录并运行npm install以安装package.json中列出的本地依赖项。
安装Ruby，使用gem install Bundler安装Bundler，最后运行bundle install。这将安装所有Ruby依赖项，如Jekyll和插件。

字体棒极了

从https://github.com/fortawesome/font-awesome/tree/fa-4

下载文件

将font-awesom/scss文件夹复制到您的/bootstrap文件夹

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

$fa-font-path:“。。/fonts”； @导入“。。/FONT-Awesome/scss/FONT-Awesome.scss”；

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

Github Octicons

从https://github.com/github/octicons/

下载文件

将octicons文件夹复制到您的/bootstrap文件夹

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

$fa-font-path:“。。/fonts”； @import“。。/octicons/octicons/octicons.scss”；

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

字形子

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

包括超过250个字形的字体格式从字形半身集。 Glyphicons半身人通常不是免费提供的，但是他们的创造者已经让他们免费自举。作为对您的感谢，我们只要求您包括一个链接回到字形只要可能。

据我所知，您可以免费使用这250个符号，只限于引导，但不限于版本3，独占。因此您也可以将它们用于引导程序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文件夹
打开您的scs/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";

请注意，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/sprocets-Octicons.scss。

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

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

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

另外，尝试Yeoman generator构建一个前端Bootstrap 4 Web应用程序，用Font Awesome或Github Octicons测试Bootstrap 4。

匿名用户

从字形迁移到字体Awesome是相当容易的。

包括对Font Awesome的引用（本地或使用CDN）。

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

然后运行搜索并替换您搜索glyphiconglyphicon-的位置，并将其替换为fa fa-。大多数CSS类名都是相同的。但有些已经更改，因此您必须手动修复这些。

匿名用户

Bootstrap 3中的glyphicons.less文件在GitHub上可用。 https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less

它需要这些变量:

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

然后您可以将。less文件转换为您可以直接使用的。css文件。您可以在lesscs.org/less-preview/上进行在线操作。这里我已经为您完成了，将其保存为glyphicons.css并包含在您的HTML文件中。

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

您还需要Bootstrap 3包中的Glyphicon字体，将它们放在/fonts/目录中。

现在你可以像往常一样继续使用Bootstrap 4中的字形了。