How can I overlay an icon on the top right corner of image?

Question

Stack:

• React
• Relevant Package: FontAwesome => 'fortawesome'
• Relevant Package: React Bootstrap => 'react-bootstrap'

What I currently have:

I am building a profile page and I would like users to be able to remove social media links with an "x" button.

This is my current code:

                      <React.Fragment>
                        <a href={social_item.url} key={social_item.id}>
                          <Image
                            className='m-2 shadow-sm'
                            width='32px'
                            src={
                              'https://www.google.com/s2/favicons?sz=128&domain_url=' +
                              social_item.url
                            }
                            rounded
                          />
                          <FontAwesomeIcon
                            color='grey'
                            className='fa-stack the-wrapper'
                            icon={faTimes}
                          />
                        </a>
                      </React.Fragment>

I know that when you are using two FontAwesome images you can overlay them using fa-stack. In this case, I am trying to overlay the "x" to the top right corner of the social media image.

My ideal outcome is something along these lines:

I have tried fa-stack but it does not appear to work when using icons in conjunction with images.

Any advice would be appreciated!

Answer 1

Making the link a a relative positioned block with "x" absolute positioned will work, like so:

 a { display: inline-block; position: relative; } a.image { display: block; width: 25px; height: 25px; background-color: #f0f; } a.icon { position: absolute; right: 0; top: 0; line-height: 0; }

 <a> <span class="image">&nbsp;</span> <span class="icon">x</span> </a>

Answer 2

 import React from "react"; const Icon = () => ( <React.Fragment> <a alt="" href="" className="block-icon"> <Image className="m-2 shadow-sm" width="32px" src={ "https://www.google.com/s2/favicons?sz=64&domain_url=yahoo.com" } rounded /> <FontAwesomeIcon color="grey" className="fa-stack the-wrapper icon-tag" icon={faTimes} /> </a> </React.Fragment> ); export default Icon;

 /* css */.block-icon { position: relative; display: inline-flex; }.icon-tag { position: absolute; position: absolute; top: 0; right: 0; z-index: 1; width: 12px;important: height; 12px !important; }

You may not make width with the.important option but then svg close will take all the heights of the Image component in which case you should change top and right.

It gives something like this.