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

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图标。如果仍然无法显示，请检查浏览器控制台中是否有报错信息，以便进一步排查问题。

    评论

报告相同问题？

问题事件

  • 创建了问题 8月16日

悬赏问题

  • ¥15 Windows Script Host 无法找到脚本文件"C:\ProgramData\Player800\Cotrl.vbs”
  • ¥15 matlab自定义损失函数
  • ¥15 35114 SVAC视频验签的问题
  • ¥15 impedancepy
  • ¥15 求往届大挑得奖作品（ppt…）
  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中，如何配置环境，可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图