我们有一个项目,密集使用glyphicons。
引导 </跨度> v4完全删除了glyphicon字体。
是否有相同的图标随附 引导 </跨度> V4?
http://v4-alpha.getbootstrap.com/migration/ 鈥
从Glyphicons迁移到Font Awesome很容易。
包括对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- 。大多数CSS类名都是一样的。有些已经改变,所以你必须手动修复它们。
glyphicon glyphicon-
fa fa-
你可以使用两者 字体很棒 和 Github Octicons 作为Glyphicons的免费替代品。
Bootstrap 4也从Less切换到Sass,因此您可以将字体的Sass(SCSS)整合到构建过程中,为项目创建单个CSS文件。
另见 https://getbootstrap.com/docs/4.1/getting-started/build-tools/ 了解如何设置工具:
/bootstrap
npm install
gem install bundler
bundle install
的 字体很棒 强>
font-awesome/scss
打开您的SCSS /bootstrap/bootstrap.scss 并在此文件的末尾写下以下SCSS代码:
/bootstrap/bootstrap.scss
$fa-font-path: "../fonts"; @import "../font-awesome/scss/font-awesome.scss";
请注意,您还必须复制字体文件 font-awesome/fonts 至 dist/fonts 或由任何其他公共文件夹设置 $fa-font-path 在上一步中
font-awesome/fonts
dist/fonts
$fa-font-path
npm run dist
的 Github Octicons 强>
octicons
$fa-font-path: "../fonts"; @import "../octicons/octicons/octicons.scss";
的 Glyphicons 强>
在Bootstrap网站上,您可以阅读:
包括Glyphicon Halflings套装中超过250种字体格式的字形。 Glyphicons半身人通常不是免费提供的,但他们的创造者已经免费提供Bootstrap。谢天谢地,我们只要求您尽可能包含回到Glyphicons的链接。
据我所知,你可以使用这些250个字形免费限制Bootstrap,但不限于版本3独家。所以你也可以将它们用于Bootstrap 4。
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";
请注意,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 。
bower_components/components-font-awesome/
octicons/octicons/octicons-.scss
octicons/octicons/sprockets-octicons.scss
以上所有内容都将编译所有CSS代码,包括单个文件,只需要一个HTTP请求。或者,您也可以从CDN加载Font-Awesome字体,在许多情况下也可以快速加载。 CDN上的两种字体也包括字体文件(使用data-uri,旧浏览器可能不支持)。因此,请考虑哪种解决方案最适合您的情况,具体取决于支持的浏览器。
对于Font Awesome,将以下代码粘贴到 <head> 您网站的HTML部分:
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
也试试 Yeoman生成器支持前端Bootstrap 4 Web应用程序 使用Font Awesome或Github Octicons测试Bootstrap 4。
概述:
我正在使用没有glyphicons的bootstrap 4。我发现bootstrap treeview的问题取决于glyphicons。我正在使用treeview,我正在使用scss @extend将图标类样式转换为字体真棒类样式。我觉得这很光滑(如果你问我的话)!
细节:
我使用scss @extend为我处理它。
我之前决定使用font-awesome没有比我过去使用它更好的理由了。
当我去尝试bootstrap treeview时,我发现图标丢失了,因为我没有安装glyphicons。
我决定使用scss @extend功能,让glyphicon类使用font-awesome类,如下所示:
.treeview { .glyphicon { @extend .fa; } .glyphicon-minus { @extend .fa-minus; } .glyphicon-plus { @extend .fa-plus; } }
如果您使用的是Laravel 5.6,它附带Bootstrap 4.您只需要:
npm install and npm install open-iconic --save
在 /resources/assets/sass/app.scss 将第2行的Google字体导入行更改为
/resources/assets/sass/app.scss
@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和图标。
<script src="{{asset('js/app.js')}}"></script>
用法是 <span class="oi oi-cog"></span>
<span class="oi oi-cog"></span>
请参阅此处了解图标详情: Open Iconic:Bootstrap推荐4
如果在Laravel之外的其他项目中,您可以进行导入 @import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css'; 在你的样式文件中。
@import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css';
希望这可以帮助。快乐的尝试。