readthedocs.org中的特殊"note"盒子是怎么做出来的？

Question

想知道readthedocs.org中的特殊文本框是怎么做出来的

例如：

我认为不仅仅是调整 css 文件，我真的很想自己创建一个。

提前致谢！

编辑： 我知道整个框来自 note 指令。然而，我的问题是：他们是怎么做到这个“！”的？标记？我在 css 文件中找不到线索。

Answer 1

div {
  background-color: skyblue;
  padding: 3px 10px;
}
.fa-exclamation-circle {
  color: white;
}
span {
  color: white;
  margin-left: 6px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />

<div>
  <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
  <span>Note</span>
</div>

readthedocs.org中的特殊"note"盒子是怎么做出来的？

How is the special "note" box made in readthedocs.org?

css

python-sphinx