2401_86796315 2024-08-16 22:43 采纳率: 0%
浏览 8

Glyphicons字体图标变小方框问题

为什么我在bootstrap里引用Glyphicons 字体图标，结果显示为小方框？？听其他人说引入cdn，我试了一下好像不行，但其实我也不知道我的操作对不对，还有说引入fonts的，但是我最开始就把fonts引入了，系统也没有报错，我真的不知道问题出现在哪，我看视频的那个讲课的人就能弄好，但是我照着他的每一个步骤做结果还是不行😭

img

img

img

  • 写回答

1条回答 默认 最新

  • 一直免费一直爽 2024-08-16 22:50
    关注

    以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

    问题的原因可能是字体文件没有正确加载。请确保在HTML文件中引入了正确的Glyphicons字体文件和Bootstrap CSS文件。以下是一个例子：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glyphicons示例</title>
    <!-- 引入Bootstrap CSS文件 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- 引入Glyphicons字体文件 -->
    <style>
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('https://netdna.bootstrapcdn.com/bootstrap/3.4.1/fonts/glyphicons-halflings-regular.eot');
            src: url('https://netdna.bootstrapcdn.com/bootstrap/3.4.1/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
                url('https://netdna.bootstrapcdn.com/bootstrap/3.4.1/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
                url('https://netdna.bootstrapcdn.com/bootstrap/3.4.1/fonts/glyphicons-halflings-regular.woff') format('woff'),
                url('https://netdna.bootstrapcdn.com/bootstrap/3.4.1/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
                url('https://netdna.bootstrapcdn.com/bootstrap/3.4.1/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
        }
    </style>
</head>
<body>
    <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
</body>
</html>

    将上述代码保存为一个HTML文件，然后在浏览器中打开，看看是否能够正常显示Glyphicons图标。如果仍然无法显示，请检查浏览器控制台中是否有报错信息，以便进一步排查问题。

    评论

报告相同问题？

  • 详解Bootstrap glyphicons字体图标
    2020-11-23 01:20
    Bootstrap Glyphicons是Bootstrap框架中内置的一种图标库，它包含了超过200个预定义的图标。这些图标以字体文件的形式存在，使得它们可以像文字一样处理，具备可缩放、颜色可调整等优点。在Web开发中，字体图标因为...
  • BootStrap glyphicons 字体图标实现方法
    2020-09-02 10:43
    Bootstrap glyphicons 字体图标实现方法是通过在Web项目中使用图标字体来实现的。 glyphicons是Bootstrap框架提供的一个图标字体集，可以方便地在网页中使用。Bootstrap glyphicons 字体图标集中的图标包括各种基础...
  • Bootstrap前端框架Glyphicons字体图标
    2024-09-05 09:03
    elirlove1的博客 115工具网收集提供Bootstrap前端框架Glyphicons字体图标库对照表，Bootstrap前端UI,Glyphicons字体图标调用,Bootstrap按钮字体图标对照表,包括250多个来自Glyphicon Halflings的字体图标.项目中引用Bootstrap相关...
  • Glyphicons V3 字体图标查询
    2022-07-26 00:32
    AI-剁椒鱼头的博客 Glyphicons V3 字体图标查询 可以查询字体图标对应的Class名称
  • Angular7 关于Bootstrap4.x.x版本无法使用Glyphicons 字体图标 简单解决方案
    2018-11-22 17:02
    小目标青年的博客 是的，笔者最近开始磨磨蹭蹭学起了这个Angular（等我系统性学习后，后面的博客估计会有很多关于Angular的东西了，... 于是乎，发现，在bootstrap4版本里面，它不给用Glyphicons 字体图标 了（为啥不给用，自己去官方...
  • Bootstrap 字体图标Glyphicons
    2018-03-07 10:00
    ixygj197875的博客 字体图标GlyphiconsBootstrap 提供了一个图片精灵，其中包含 140 个图标，这些图标可用于按钮、链接、导航和表单等元素。这些图标由 Glyphicons（http://glyphicons.com/）提供。如图 3‑62所示：图3-62 Bootstrap...
  • bootstrap4.0图标使用_详解Bootstrap glyphicons字体图标
    2021-02-27 09:45
    weixin_39875941的博客 本章将讲解字体图标(Glyphicons)，并...首先给大家介绍什么是字体图标：字体图标是在 Web 项目中使用的图标字体。字体图标在下载的Bootstrap的fonts文件夹中。.glyphicon {position: relative;top: 1px;display: inl...
  • 【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单
    2020-10-05 16:01
    訾博ZiBo的博客 一、Glyphicons 字体图标 1、所有可用的图标 见https://v3.bootcss.com/components/#glyphicons 2、如何使用 出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常...
  • Bootstrap 字体图标(Glyphicons)
    2021-01-19 21:24
    Bootstrap 字体图标(Glyphicons) @font-face { font-family:’Glyphicons Halflings’;src:url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot);src:url(//maxcdn....
  • glyphicons图标显示成方框
    2023-08-21 15:08
    PineappleL的博客 原因是，在下面画圈的地方加入了其他字体。解决办法：不能修改/增加这里的字体。
  • Bootstrap引用Glyphicons 字体图标
    2022-09-07 21:42
    jyr2014的博客 Bootstrap引用Glyphicons 字体图标
  • Bootstrap3的Glyphicons字体图标的使用方法
    2018-09-16 01:27
    NGDEMO的博客 （1）Bootstrap3提供了很多免费的可用字体图标，为了阅读方便，国内的大多数Bootstrap初学者都会选择去Bootstrap中文网学习，但Bootstrap中文网上下载的Bootstrap 3 的环境文件到本地使用，按照Bootstrap中文网给出...
  • 如何引入使用Bootstrap之glyphicons字体图标组件
    2018-12-19 01:36
    huanghong6956的博客 2.我们需要用到的bootstrap提供的css，js，fonts等都能在下载好的bootstrap/dist文件夹里面找到 fonts文件夹里的内容： 3.把dist文件夹下的余下3个文件夹复制到...4.使用图标组件：test.html 首先引入外部boots...
  • Bootstrap 组件：Glyphicons 字体图标
    2020-09-01 18:17
    汪末末的博客 例如下图的一些字体图标，更多的字体图标请见boostrap官方文档 。 如何使用字体图标 出于性能的考虑，所有图标都需要一个基类（glyphicon）和对应每个图标的类。为了设置正确的内补（padding），必须在图标和文本...
  • Glyphicons 字体图标
    2019-10-02 22:01
    dipangfou4430的博客 包括260个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为 Glyphicons 添加一个友情链接。 如何使用 出于...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 8月16日