使用Bootstrap的HTML代码中Glyphicons无法在浏览器显示的问题

嘿，这问题我碰到过好多次啦！你用的是Bootstrap 4的CDN，但Bootstrap 4已经彻底移除了内置的Glyphicons图标库——这个图标在Bootstrap 3里是默认自带的，但从4版本开始官方就不再维护和集成它了，所以你直接写glyphicon类肯定不会显示。

给你几个靠谱的解决办法，按需选就行：

• 首选：改用Font Awesome图标库（Bootstrap官方推荐）
  这是现在最主流的替代方案，步骤超简单：

  1. 在HTML的<head>里加一行Font Awesome的CDN引入（不用下载本地文件）：

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     

  2. 把原来的Glyphicons代码替换成Font Awesome的写法，比如原来的搜索图标<span class="glyphicon glyphicon-search"></span>，改成：

     <i class="fa-solid fa-magnifying-glass"></i>
     

  你可以根据需要去选对应的图标，类名格式是样式前缀（比如fa-solid、fa-regular）加图标名称。

• 一定要用Glyphicons？手动引入资源就行
  如果你对Glyphicons有执念，那得自己单独把它的资源加进项目：

  1. 下载Glyphicons的完整资源包（包含glyphicons.css和.woff、.ttf这类字体文件）
  2. 把字体文件放到你的项目目录里，确保glyphicons.css里的字体路径指向正确（别让浏览器找不到字体）
  3. 在HTML的<head>里引入这个glyphicons.css，注意要放在Bootstrap CSS的后面：

     <link rel="stylesheet" href="你的项目路径/glyphicons.css">
     

  这样原来的Glyphicons类就能正常用了，不过要注意Glyphicons已经好几年没更新了，可能和新浏览器有兼容性问题。

• 退而求其次：降级到Bootstrap 3
  如果你不需要Bootstrap 4的新功能，也可以直接换成Bootstrap 3的CDN，这样Glyphicons就能直接用：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  

  不过这个方案不太推荐，因为Bootstrap 3已经停止维护了，没有安全更新，长期用有风险。

最后提个醒：如果你的项目里还用到了Bootstrap的JS组件（比如模态框、下拉菜单），切换版本的时候要注意对应上JS依赖，比如Bootstrap 3需要jQuery，Bootstrap 4需要jQuery+Popper.js，别搞混了哦！

内容的提问来源于stack exchange，提问作者pankaj jha