0

I have a Vue Component:

<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>

I want to display the paperclip over the other icon.

Unfortunately, the solution at How to overlay one div over another div doesn't work as position:absolute orients itself on the whole page instead of orienting within my vue component.

My second idea was using negative margins on the icon, but that will also move the text.

Is there a way to get the icon to overlay within my vue component with html5/css?

Christian
  • 25,249
  • 40
  • 134
  • 225
  • `orients itself on the whole page instead of orienting within my vue component.` --> add poisition:relative to the component – Temani Afif Feb 06 '19 at 14:12
  • @TemaniAfif : Do you mean I should put that into the span? Otherwise, how do I use the solution that depends on using `position:absolute`? – Christian Feb 06 '19 at 14:21
  • a position:absolute element will be positionned considering its first postionned ancestor .. so to avoid having the *page* as a reference make the parent element or your reference to be position:relative; – Temani Afif Feb 06 '19 at 14:23
  • `position:absolute` gets the element out of document flow (parents behave like it's not there) and `top/bottom/right/left` position the element ***relative to its closest positioned ancestor***. Where "positioned" means: with a set position value other than `static`. So set `position:relative` on the parent you want to use as a reference for positioning your `position:absolute` child. Read [Positioning 101](https://alistapart.com/article/css-positioning-101). – tao Feb 06 '19 at 14:27
  • So if you want to use the `` (rather than the page) as reference for your paperclip, give the `` `style="position:relative;"` – tao Feb 06 '19 at 14:40

1 Answers1

2

FontAwesome actually supports 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>
Yom T.
  • 8,760
  • 2
  • 32
  • 49