html - 如何在 Vue 组件中将一个图标覆盖在另一个图标之上？

Question

我有一个 Vue 组件:

<template>
    <span>
        <i  class="fas fa-file-pdf icon_styling"
            v-bind:style="`color: ` +  fileStatusColor()" ></i>
        <i  class="fas fa-paperclip icon_addition_styling" 
            v-if={{showIcon}}></i>
        {{ mytext }}
    </span>
</template>

我想在另一个图标上显示回形针。

不幸的是，How to overlay one div over another div 的解决方案不起作用，因为 position:absolute 在整个页面上定位自己，而不是在我的 vue 组件内定位。

我的第二个想法是在图标上使用负边距，但这也会移动文本。

有没有办法用 html5/css 让图标覆盖在我的 vue 组件中？

Answer 1

FontAwesome居然支持stacked icons .

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<span class="fa-stack fa-2x">
  <i class="fas fa-file fa-stack-2x icon_styling" style="color: crimson;"></i>
  <i class="fas fa-paperclip fa-stack-1x icon_addition_styling" style="color: white;"></i>
</span>