html - 在跨度内重叠字形

Question

我试图重叠两个字形图标以产生独特的图像。类和格式符合 Bootstrap 3 标准。下面是单个字形图标的演示代码和视觉输出：

<a href="#" class="dropdown-toggle" data-toggle="dropdown">
  <span class="glyphicon glyphicon-asterisk"></span>
  Viruses
  <span class="caret"></span>
</a>

这是我结合两个字形图标（演示代码和图像）的更好尝试之一：

<a href="#" class="dropdown-toggle" data-toggle="dropdown">
  <div style="position: relative; top: 1px; display: inline-block;">
    <span class="glyphicon glyphicon-asterisk" style="position: absolute !important;"></span>
    <span class="glyphicon glyphicon-cog" style="position: absolute !important;"></span>
  </div>
  Viruses
  <span class="caret"></span>
</a>

我遇到的问题是我无法弄清楚如何让堆叠的字形图标与单个字形图标（相对于文本）的对齐方式相匹配。出于某种原因，这 2 个字形图标位于链接容器之外。我可能会强制字形图标相对于链接的正确位置，但如果链接容器不扩展，它将导致其他相邻链接的间距问题。

附加信息：spans 分配的字形图标具有以下样式属性：

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

标签： htmlcss

Answer 1

为什么不向a标签（父元素）添加一个类，然后将文本内容（跨度标签）包装在一个div中并在标签内容上放置一个display: flex和，然后在图标上使用选择器来使用位置属性定位其相对内容，顶部和/或左侧。还将内容（span 标签）包装在一个div中，其中包含一个带有margin-left的内容类，以将其放置在病毒图标的左侧。align-items: centera

我在 snipit 中有 BS3 CDN 与 JQuery 链接，但由于某种原因图标没有解析，因此可能需要对您端图标元素的位置左/右属性进行一些调整。

注意：我从 div 元素中删除了除 position:relative 样式之外的所有样式，并将类添加到 a 标签 ( icon-parent ) 和 div ( icons )

.icon-parent {
  display: flex;
  align-items: center;
}

.icons {
  position: relative;
  top: -6px; /* this may need some tweaking once the icons parse correctly */
  left: 5px;
}

.content {
  margin-left: 2rem; /* this may need some tweaking once the icons parse correctly */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" class="dropdown-toggle icon-parent" data-toggle="dropdown">
  <div class="icons">
    <span class="glyphicon glyphicon-asterisk" style="position: absolute !important;"></span>
    <span class="glyphicon glyphicon-cog" style="position: absolute !important;"></span>
  </div>
  <div class="content">
    <span>Viruses</span>
    <span class="caret"></span>
  </div>
</a>