如何在图像的右上角叠加一个图标？

Question

堆栈：

• 反应
• 相关包：FontAwesome => 'fortawesome'
• 相关包：React Bootstrap => 'react-bootstrap'

我目前拥有的：

我正在构建个人资料页面，我希望用户能够使用“x”按钮删除社交媒体链接。

这是我当前的代码：

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

我知道，当您使用两个 FontAwesome 图像时，您可以使用 fa-stack 覆盖它们。在这种情况下，我试图将“x”叠加到社交媒体图片的右上角。

我的理想结果是这样的：

我尝试过 fa-stack，但在将图标与图像结合使用时，它似乎不起作用。

任何建议将不胜感激！

Answer 1

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

您可能无法使用 !important 选项设置宽度，但 svg close 将采用 Image 组件的所有高度，在这种情况下您应该更改顶部和右侧。

It gives something like this.

Answer 2

使链接a 具有“x”绝对定位的相对定位块将起作用，如下所示：

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>