如何在图像的右上角覆盖图标？

debugcn 发表于 Dev

学习IT

堆栈：

反应
相关软件包：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，但是在将图标与图像结合使用时似乎不起作用。

任何意见，将不胜感激！

arma73

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组件的所有高度，在这种情况下，您应该更改顶部和右侧。

它给出了这样的东西。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。