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>

如何在Vue组件中的另一个图标上叠加图标？

1 个答案: