从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类名是相同的。有些已经改变了，所以你必须手动修复它们。

它还没有随bootstrap 4一起发布，但现在bootstrap团队正在开发他们的图标库。

https://icons.getbootstrap.com/

https://github.com/twbs/icons

从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类名是相同的。有些已经改变了，所以你必须手动修复它们。

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。

如果你正在使用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';在你的样式文件中。

希望这能有所帮助。快乐的尝试。

概述:

我使用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;
  }
}