css - 定位语义-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.Group size="big" className="shopping_cart_icon">
   <Icon link name="shopping cart" />
   <Icon corner="top right" />
</Icon.Group>

使用这个类名，你可以应用 CSS，top: 0 & right:0 会将你的图标放在 upper右 Angular 。

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

Demo