Bootstrap 4 – Glyphicons迁移?

前端之家收集整理的这篇文章主要介绍了Bootstrap 4 – Glyphicons迁移?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们有一个项目,密集使用glyphicons。
Bootstrap v4完全删除了glyphicon字体。

对于Bootstrap V4中附带的图标,是否有等效?

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

解决方法

您可以使用 Font AwesomeGithub Octicons作为Glyphicons的免费替代品。

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

另请参阅http://v4-alpha.getbootstrap.com/getting-started/build-tools/以了解如何设置您的工具:

>下载并安装Node,我们用它来管理我们的依赖。
>使用npm install -g grunt-cli安装Grunt命令行工具,grunt-cli。
>导航到root / bootstrap目录并运行npm install以安装package.json中列出的本地依赖项。
>安装Ruby,使用gem install bundler安装Bundler,最后运行bundle。这将安装所有Ruby依赖项,如Jekyll和Sass linter。

字体Awesome

>在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”;

>请注意,您还必须将字体文件从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”;

>请注意,您还必须将字体文件从font-awesome / fonts复制到dist / fonts或在上一步中由$ fa-font-path设置的任何其他公用文件
>运行:grunt dist使用Octicons重新编译代码

注意Bootstrap 4需要后CSS自动映射器进行编译。当你使用一个静态Sass编译器来编译你的CSS,你应该后来运行autoprefixer。

您也可以使用Bower安装上面的字体。使用Bower字体Awesome安装您的文件在bower_components / components-font-awesome /还注意到Github Octicons设置八进制/八进制/八进制.scss作为主文件,而你应该使用octicons / octicons / sprockets-octicons.scss。

所有上述将所有的CSS代码包括到一个单一的文件,这只需要一个http请求。或者,您也可以从CDN加载Font-Awesome字体,这在许多情况下可能会很快。 CDN上的两种字体都包括字体文件(使用数据uri,可能不支持旧的浏览器)。因此,考虑哪种解决方案最适合您的情况,取决于其他浏览器支持

对于字体awesome将以下代码粘贴到您网站的HTML的“”部分:

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

也尝试Yeoman generator to scaffold out a front-end Bootstrap 4 Web app测试Bootstrap 4与字体Awesome或Github Octicons。

字形

在Bootstrap网站上,您可以阅读:

Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free,but their creator has made them available for Bootstrap free of cost. As a thank you,we only ask that you include a link back to Glyphicons whenever possible.

因为我明白你可以使用这些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使用Glyphicons重新编译代码

猜你在找的Bootstrap相关文章