我们有一个大量使用象形文字的项目。 Bootstrap v4完全删除了字形字体。
是否有一个等效的图标与Bootstrap V4?
http://v4-alpha.getbootstrap.com/migration/
当前回答
如果你正在使用Laravel 5.6，它附带Bootstrap 4。你所需要做的就是:
npm install and npm install open-iconic --save
在/资源/资产/ sass /应用程序。将谷歌字体导入的第2行更改为
@import '~open-iconic/font/css/open-iconic-bootstrap';
你现在要做的就是
npm run watch
,包括
<link rel="stylesheet" href="{{asset('css/app.css')}}">
在主刀片文件顶部和<script src="{{asset('js/app.js')}}"></script>在关闭body标签之前。你会得到Bootstrap 4和图标。
用法是<span class="oi oi-cog"></span>
有关图标的详细信息，请参阅这里:打开图标:由Bootstrap推荐4
如果在其他项目而不是Laravel，你可以只做import @import 'node_modules/open-iconic/font/css/open-icon -bootstrap-min.css';在你的样式文件中。
希望这能有所帮助。快乐的尝试。
其他回答
你可以使用字体Awesome和Github Octicons作为Glyphicons的免费替代品。
Bootstrap 4也从Less切换到Sass，所以你可以将字体的Sass (SCSS)整合到你的构建过程中，为你的项目创建一个CSS文件。
也可以查看https://getbootstrap.com/docs/4.1/getting-started/build-tools/来了解如何设置你的工具:
下载并安装Node，我们用它来管理依赖项。 导航到根目录/bootstrap，运行npm install来安装package.json中列出的本地依赖项。 安装Ruby，用gem安装bundle，最后运行bundle Install。这将安装所有Ruby依赖项，例如Jekyll和插件。
字体太棒了
Download the files at https://github.com/FortAwesome/Font-Awesome/tree/fa-4 Copy the font-awesome/scss folder into your /bootstrap folder 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"; 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 Run: npm run dist to recompile your code with Font-Awesome
Github Octicons
在https://github.com/github/octicons/上下载这些文件 将octicons文件夹复制到/bootstrap文件夹中 打开你的SCSS /bootstrap/bootstrap。并在文件末尾写下以下scss代码: $ fa-font-path:“. . /字体”; @ import“. . / octicons / octicons / octicons.scss”; 请注意，您还必须将字体文件从font-awesome/fonts复制到dist/fonts或上一步中$fa-font-path设置的任何其他公共文件夹 运行:npm Run dist使用Octicons重新编译代码
Glyphicons
在Bootstrap网站上，您可以阅读:
包括超过250字形的字体格式从Glyphicon Halflings集。Glyphicons Halflings通常不是免费的，但是它们的创造者已经让它们可以免费用于Bootstrap。作为感谢，我们只要求您包括一个链接回到Glyphicons只要可能。
据我所知，你可以免费使用这250个字形，但不限于版本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代码:
$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";
运行:npm，使用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/sprockets-octicons.scss。
以上所有步骤将把所有CSS代码编译成一个文件，该文件只需要一个HTTP请求。或者，你也可以从CDN加载字体-很棒的字体，这可以在很多情况下很快。CDN上的两种字体都包含字体文件(使用data-uri，旧浏览器可能不支持)。因此，根据要支持的其他浏览器，考虑哪种解决方案最适合您的情况。
对于Font Awesome，将以下代码粘贴到站点HTML的<head>部分:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
也可以尝试Yeoman生成器脚手架前端Bootstrap 4 Web应用程序测试Bootstrap 4与字体Awesome或Github Octicons。
glyphicons。Bootstrap 3的较少文件在GitHub上可用。 https://github.com/twbs/bootstrap/blob/v3-dev/less/glyphicons.less
它需要这些变量:
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
@icon-font-svg-id: "glyphicons_halflingsregular";
然后你可以把。less文件转换成你可以直接使用的。css文件。你可以在lesscss.org/less-preview/上进行在线调查。在这里，我已经为你做了，保存为glyphicons.css，并将其包含在你的HTML文件中。
<link href="/Content/glyphicons.css" rel="stylesheet" />
你还需要在Bootstrap 3包中的Glyphicon字体，将它们放在/fonts/目录中。
现在你可以像往常一样继续使用Bootstrap 4中的Glyphicons。
从Glyphicons迁移到Font Awesome非常容易。
包括一个字体很棒的参考(本地的，或使用CDN)。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
然后运行搜索并替换搜索glyphicon glyphicon-并将其替换为fa fa-，并将外围元素从<span更改为<i。大多数CSS类名是相同的。有些已经改变了，所以你必须手动修复它们。
去
https://github.com/Darkseal/bootstrap4-glyphicons
下载并包含在您的代码中
<link href="bootstrap4-glyphicons/css/bootstrap-glyphicons.css" rel="stylesheet">
概述:
我使用bootstrap 4没有象形文字。我发现一个问题与引导树视图依赖于象形文字。我使用树视图，我使用scss @extend转换图标类样式为字体awesome类样式。如果你问我，我认为这是相当狡猾的!
细节:
我使用scss @extend来为我处理它。
我以前决定使用font-awesome，没有比我过去使用它更好的理由了。
当我尝试bootstrap treeview时，我发现图标不见了，因为我没有安装字形。
我决定使用scss @extend特性，让glyphicon类使用font-awesome类，如下:
.treeview {
.glyphicon {
@extend .fa;
}
.glyphicon-minus {
@extend .fa-minus;
}
.glyphicon-plus {
@extend .fa-plus;
}
}
