信息按钮显示不正确

Question

我正在尝试在HTML表单中添加一个信息按钮，并且我遵循在https://codepen.io/EasyBoarder/pen/Lkzzjy中找到的代码。

我在html和css文件中复制了完全相同的代码，但没有看到（i）图标。

HTML

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="col-md-12">
    <div class="info">
        <i class="icon-info-sign"></i>
        <span class="extra-info">
             A little column extra info. Aaand just a little bit more
        </span>
    </div><br />
    <span>Hover me!</span>
</div>

CSS

.extra-info {
  display: none;
  line-height: 30px;
  font-size: 12px;
    position: absolute;
  top: 0;
  left: 50px;
}

.info:hover .extra-info {
  display: block;
}

.info {
  font-size: 20px;
  padding-left: 5px;
  width: 20px;
  border-radius: 15px;
}

.info:hover {
  background-color: white;
  padding: 0 0 0 5px;
  width: 315px;
  text-align: left !important;
}

我现在可以在HTML表单中看到它：

是因为CSS文件中未声明类icon-info-sign吗？或者，href链接不是最新的？ 如果是这样，它在在线代码示例中如何工作？

谢谢！

编辑：

我将css配置添加到global.scss。 但是，在F12模式下，我看不到这个CSS文件。只能看到我没有修改的loading.css文件。

Jhipster生成了PS代码。

Answer 1

.icon-info-sign图标取决于Font Awesome的CSS。在此示例中，它可以正常工作：

body {
  background-color: #CECECE !important;
  margin: 20px !important;
}

* {
  transition: all .2s ease;
}

.extra-info {
  display: none;
  line-height: 30px;
  font-size: 12px;
  position: absolute;
  top: 0;
  left: 50px;
}

.info:hover .extra-info {
  display: block;
}

.info {
  font-size: 20px;
  padding-left: 5px;
  width: 20px;
  border-radius: 15px;
}

.info:hover {
  background-color: white;
  padding: 0 0 0 5px;
  width: 315px;
  text-align: left !important;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="col-md-12">
  <div class="info">
    <i class="icon-info-sign"></i>
    <span class="extra-info">A little column extra info. Aaand just a little bit more</span>
  </div>
  <br />
  <span>Hover me!</span>
</div>

您是否已在浏览器的开发人员工具中检查了CSS是否已正确包含？