Bootstrap4及以上版本图标问题解决方案：引入3版本字体

在Bootstrap 4及以上版本中，可能会遇到无法使用内置图标的问题，因为Bootstrap 4默认不再包含Glyphicons字体图标集。这个问题可以通过以下步骤来解决： 1. 引入3.x版本的icons字体文件：由于Bootstrap 4不再提供内置的图标支持，你需要从Bootstrap 3版本中获取所需的icons。将Bootstrap 3的`fonts`文件夹（通常包含`glyphicons-halflings-regular.eot`, `glyphicons-halflings-regular.svg`, `glyphicons-halflings-regular.ttf`, `glyphicons-halflings-regular.woff`, 和 `glyphicons-halflings-regular.woff2`等文件）复制到你的项目目录中。 2. 修改CSS：在你的项目中，确保`bootstrap.min.css`文件之后添加以下自定义@font-face规则，以正确加载字体图标： ```css @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); } /* 为了保持与Bootstrap 3的兼容性，需要添加下面的样式 */ .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 你可以根据需要替换或添加更多的图标，例如： .glyphicon-asterisk:before { content: "\002a"; } .glyphicon-plus:before { content: "\002b"; } ... */ ``` 通过以上操作，你可以在Bootstrap 4的项目中继续使用Bootstrap 3版本的Glyphicons图标。记得检查并更新HTML中的`.glyphicon`类，如`.glyphicon-asterisk`、`.glyphicon-plus`等，以引用相应的图标字符。如果你有其他版本的图标需求，可以查阅Bootstrap 3的官方文档或第三方图标库，如Font Awesome，来替换或补充这些图标。