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={
                              ';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 oute 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!

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./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 oute 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!

• javascript
• css
• reactjs
• font-awesome

3 Answers 3

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./s2/favicons?sz=64&domain_url=yahoo."
            }
            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 ponent in which case you should change top and right.

It gives something like this.

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>

<!DOCTYPE html>
<html>
<head>
<style>
a {
  display: inline-block;
  position: relative;
}
a .image {
  display: block;
  width: 25px;
  height: 25px;
  background-color: #f0f;
}
a .icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  color: white;
  background-color: black;
  line-height: 15px;
  text-align: center;
  border-radius: 3px; /* Adjust this for more or less rounding */
  font-size: 12px; /* Adjust the font size if needed */
}

</style>
</head>
<body>

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

</body>
</html>