定位语义-ui图标

Question

我目前正在做一个项目，我需要一些帮助来尝试在页面的右上角放置一个图标。我一直在玩它，但没有任何运气。我正在使用语义-ui 图标

import React from 'react'
import { Icon } from 'semantic-ui-react';

const ShoppingCart = () => {

  return(

    <Icon.Group size='big'>
      <Icon link name='shopping cart' />
      <Icon corner='top right'/>
    </Icon.Group>
  )
}

export default ShoppingCart;

这是我用来定位的css

i {
  position: absolute;
  bottom: 3000px;
  /* left: 80%; */
  margin-left: 380px !important;
}

Answer 1

您可以为您的 icon、

提供自定义 class 名称

<Icon.Group size="big" className="shopping_cart_icon">
   <Icon link name="shopping cart" />
   <Icon corner="top right" />
</Icon.Group>

使用此 class 名称，您可以应用 CSS、top: 0 和 right:0 会将您的图标放置在 右上角 .

.shopping_cart_icon{
   position : absolute;
   top : 0;
   right : 0;
}

Demo

定位语义-ui图标

positioning semantic-ui icon

css

reactjs

semantic-ui