程序员经验分享-hwhale

Glyphicon 在 bootstrap 版本 4.1 及更高版本中不起作用

2024-02-02

我试图展示一个搜索图标形式，但唯一的按钮显示没有字形。

<form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</form>

RESULT enter image description here

我使用引导程序版本 4.1。我得到了字形代码getbootstrap.com https://getbootstrap.com/docs/3.3/components/#glyphicons-how-to-use并形成getbootstrap.com https://getbootstrap.com/docs/4.0/components/navbar/#supported-content

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<form class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</form>

Bootstrap V4 及更高版本中已删除字形。 https://v4-alpha.getbootstrap.com/migration

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<form class="form-inline my-2 my-lg-0">
  <div class="input-group">
    <input class="form-control" type="search" placeholder="Search">
    <div class="input-group-append">
      <div class="input-group-text"><i class="fa fa-search"></i></div>
    </div>
  </div>
</form>

Here, 字体真棒 http://fontawesome.io用来。参考这个answer https://stackoverflow.com/a/33768443/7678788了解 Glyphicons 和 Font Awesome 的更多替代品

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

twitterbootstrap

Bootstrap4

glyphicons

Glyphicon 在 bootstrap 版本 4.1 及更高版本中不起作用 的相关文章

  • 在 Web 应用程序上同时运行两个版本的 (twitter) bootstrap

    我目前已经开始尝试使用 bootstrap 和 angularjs 进行客户端开发 我收到了一项任务 为我们的网站 一个 angularjs 应用程序 制作一个或多或少独立的功能 并且一直在研究它 但注意到我学到的引导函数不起作用 经过检查

  • div 全宽的响应式背景图像

    我正在尝试弄清楚如何在 div 全宽和响应式中制作背景图像 背景图像在页面的宽度上扩展 并且具有响应性 但图像的高度不是其完整高度 似乎它被某种方式切断了 我正在使用引导框架 我尝试这样做的原因是我想在图像上覆盖一些文本 我尝试了很多不同的

  • Bootstrap 4 列和行产生不需要的填充[重复]

    这个问题在这里已经有答案了 我正在尝试使用 bootstrap 创建列和行来放置我的图像 但是在图像周围添加了太多的填充 这导致我的图像看起来不像设计 这就是我构建 HTML 的方式

  • 如何向 Django 表单添加表单控件？

    我尝试将表单控件添加到我为 Django 制作的表单应用程序中 我已经创建了该应用程序 并希望将表单添加到引导程序模板中 但是我不知道如何为我的电子邮件字段添加引导程序的更时尚的文本框 我希望最终得到类似于此引导模板一角的登录字段的内容 尽

  • 使用 SASS（从命令行）和 Autoprefixer（对于 Bootstrap 4.x）

    我最近开始使用scss文件 尤其是自定义文件引导程序 为了编译我的 scss 文件 以及引导程序 我使用sass https sass lang com 从命令行 例子 sass path to scss bootstrap mycusto

  • Bootstrap 3轮播淡入新幻灯片而不是滑动到新幻灯片

    我正在使用 Bootstrap 3 未修改 Here s div class carousel slide ol class carousel indicators li class active li li li ol div class

  • Bootstrap 词缀总是“跳跃”

    我想在我的侧边栏上使用 bootstrap 的 affix 插件 然而 由于我的网站是响应式的 它总是在某些维度上跳跃 我无法让它正常工作 我尝试了此处列出的解决方案 如何使用twitter的bootstrap 2 1 0中新的affix插

  • Bootstrap 使用 SASS 和 fontawesome 图标分隔符修改面包屑

    所以我正在尝试更改默认值breadcrumb与 SASS 的风格 我已经按照官方 Bootstrap 4 beta 3 文档中提到的方式设置了所有内容 我更改了以下内容custom scss breadcrumb divider f105

  • 在 bootstrap-table 中添加链接

    我想添加一个指向某个列的链接引导表 http wenzhixin net cn p bootstrap table 这个怎么做 在您的 HTML 表中 th Computer th 在你的 JavaScript 中 function Lin

  • Bootstrap：列表内联项目符号？

    有人知道如何在 Bootstrap 3 中水平列表中的元素之间添加项目符号 分隔符吗 ul class list inline li Author Michal li li Modified 17 08 2014 li li Comment

  • 切换活动链接 Bootstrap 导航栏

    我读过很多关于这个主题的帖子 发现几乎总是相同的解决方案 但它对我不起作用 我的问题如下 我想使用 Twitter Bootstrap 2 3 2 及其导航栏 因此我包含了 css 和 js 文件 在此之前 我还包括 jquery 然后我举

  • Bootstrap 4 Beta 使用 Webpack 3.x 导入 Popper.js 会抛出 Popper 不是构造函数

    So Bootstrap 4 Beta出来了 耶 然而 Tether 已被取代Popper js用于工具提示 和其他功能 我看到控制台中抛出一个错误 速度足够快 足以建议我进行更改Popper js Bootstrap dropdown r

  • 使用 Bootstrap 4 隐藏表列

    我知道 Bootstrap 4 使用新的显示实用程序 https getbootstrap com docs 4 0 utilities display 根据屏幕尺寸显示或隐藏信息 我的问题是如何使这些与表格一起使用 由于屏幕尺寸较小 我想

  • Sass::SyntaxError：找不到或无法读取要导入的文件：bootstrap-sprockets

    我在开发和生产部署中突然遇到此错误 自定义 css scss import bootstrap sprockets import bootstrap 错误 生产中 rake aborted Sass SyntaxError File to

  • 使用 jquery 更改锚文本和图标

    我有一个隐藏或显示 div 的锚标记 但我无法更改它的文本和图标 如何更改文本和图标标签 因为目前它将图标标签解析为常规文本 锚标记 a class collapse info btn i class icon arrow up icon

  • Bootstrap 网格边距

    我这里有一个jsfiddle http jsfiddle net nH5WP http jsfiddle net nH5WP 这是一个使用 Bootstrap 3 的超级简单的 3 x 3 网格 我想在每个块的右侧和底部添加边距 每行中的最

  • 将 Twitter 引导样式添加到 Rails 表单助手

    在阅读建议我使用带有引导程序集成的 Simple form gem 的答案后 我安装了它并根据 simple form 说明创建了我的表单 但输入框向右浮动 这是布局 正在使用部分 shared reg 调用该表单 div class co

  • 如何对 bootstrap-3 分页进行编程以处理简单的 HTML 内容

    我正在 新闻 部分工作 并尝试使用 jquery 使 bootstrap 3 分页工作 分页的 HTML

  • 如何中和 CSS 定义而不覆盖

    有没有一种方法可以中和元素的 CSS 规则而不覆盖所有内容 例如 我正在使用 Twitter Bootstrap 它有许多预定义的 CSS 定义table 在某些地方 我不想要它们 对某些table元素 我想知道我是否可以做这样的事情 ta

  • Docpad 上的 Bootstrap 下拉菜单和可选项卡

    我使用 Twitter Bootstrap 框架创建了一个 Docpad 网站 我无法使 Bootstrap 的可选项卡或下拉菜单正常工作 它们呈现 但不运行 根据 Stackoverflow 的研究 这些 Bootstrap 函数似乎需要

随机推荐

热门标签