Question

我正在使用bootstrap框架并且有关于glyphicon的问题。我使用bootstrap v3.3.6，而在HTML中，我有这个glyphicon

<span class="glyphicon glyphicon-menu-right" aria-hidden="false"></span>

但它没有显示图标。我认为这是因为bootstrap中的版本。所以我试着把这一行放到项目

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

将显示图标，但项目中的所有样式也将被覆盖。一切都被打破...... :(

有没有人对此问题有经验？请给我一些建议。感谢。

Answer 1

如果我们使用最小的html代码，它可以工作：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8" />
   <title>Test</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <span class="glyphicon glyphicon-menu-right" aria-hidden="false"></span>
</body>

你可以在这里找到小提琴：https://jsfiddle.net/0orbqw9L/

我认为您的问题可能是某些内联/应用程序样式与引导程序样式冲突。通常，使用引导程序的最佳方法是先包含bootstrap.css，然后再包含应用程序css文件。

如果您仍然不想修改现有样式，可以在应用程序css文件中添加特定样式，这样可以覆盖您的引导样式或早期定义的应用程序样式，如：

.tag {
  font-family: Arial !important; //see the !important which helps you override styles
}

Glyphicon bootstrap可能不起作用

1 个答案: