加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Bootstrap 4 – Glyphicons迁移?

发布时间:2020-12-18 00:00:55 所属栏目:安全 来源:网络整理
导读:我们有一个项目,密集使用glyphicons。 Bootstrap v4完全删除了glyphicon字体。 对于Bootstrap V4中附带的图标,是否有等效? http://v4-alpha.getbootstrap.com/migration/ 解决方法 您可以使用 Font Awesome和 Github Octicons作为Glyphicons的免费替代品
我们有一个项目,密集使用glyphicons。
Bootstrap v4完全删除了glyphicon字体。

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

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

解决方法

您可以使用 Font Awesome和 Github 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重新编译代码

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读