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

问题描述 投票：0回答：3

堆栈：

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

我目前拥有的：

enter image description here

我正在构建一个个人资料页面，我希望用户能够使用“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”覆盖到社交媒体图像的右上角。

我理想的结果是这样的：

enter image description here

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

如有任何建议，我们将不胜感激！

javascript css reactjs font-awesome
3个回答
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;
}

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

它给出了类似这样的东西。

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>

0
投票
<!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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.