个人中心
gpt4 book ai didi

bootstrap-4 - Bootstrap 4-Glyphicons迁移？

转载 作者：行者123 更新时间：2023-11-27 22:59:10 25 4
gpt4 key购买 nike

我们有一个项目大量使用字形图标。
Bootstrap v4完全删除了glyphicon字体。

Bootstrap V4附带的图标是否等效？

Changelog

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

最佳答案

您可以同时使用Font 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 install bundler安装Bundler，最后运行bundle install。这将安装所有Ruby依赖项，例如Jekyll和插件。


字体很棒


在https://github.com/FortAwesome/Font-Awesome/tree/fa-4下载文件
将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设置的任何其他公共文件夹
运行：npm run 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设置的任何其他公共文件夹
运行：npm run dist用Octicons重新编译代码


雕ly

在Bootstrap网站上，您可以阅读：


  包括来自Glyphicon Halflings集的超过250种字体格式的字形。 Glyphicons Halflings通常不是免费提供，但其创建者已使它们免费提供给Bootstrap。谢谢，我们只要求您在可能的情况下包括指向Glyphicons的链接。


据我了解，您可以免费使用这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";



运行： npm run dist用Glyphicons重新编译代码




请注意，Bootstrap 4需要发布CSS Autoprefixer进行编译。当使用静态Sass编译器编译CSS时，您必须随后运行Autoprefixer。

您可以在 here中找到有关与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加载Font-Awesome字体，这在许多情况下也可以很快。 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 generator to scaffold out a front-end Bootstrap 4 Web app使用Font Awesome或Github Octicons测试Bootstrap 4。

关于bootstrap-4 - Bootstrap 4-Glyphicons迁移？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59082845/

25 4 0
文章推荐： jQuery 方法在 Owl Carousel 中不起作用
文章推荐： html - HTML 的 CSS 样式未在 SSRS 中呈现
文章推荐： html - 需要根据打开和关闭的括号为数组元素应用边框
文章推荐： C++ getter 函数 : const and non const
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com