arrangement of semantic-ui icon placement

Currently tackling a project and could use some assistance with positioning an icon in the upper right corner of my page. I've been trying different approaches without much success. The icon is from semantic-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;

Here's the CSS code I'm using to position it:

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

Answer №1

If you want to give a unique class name to your icon,

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

By using this custom class name, you can style the icon using CSS, setting top: 0 and right:0 will position your icon in the upper right corner.

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

Check out the demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Concealing the toolbars on iOS 7 with the overlay technique

After researching on Stack Overflow and Google, I have been trying to find a reliable method to hide the toolbars on iOS 7 since the old scroll trick is no longer effective. I came across this resource: I attempted the following code: <!doctype html& ...

How can I trigger the rendering of a component by clicking a button in a separate component?

I am currently facing a challenge in rendering a component with an "Edit" button that is nested within the component. I attempted to use conditional rendering in my code, but unfortunately, I am struggling to make it work as expected. Does anyone have any ...

What is the best way to vertically align Bootstrap Columns to ensure they have consistent heights?

I'm currently in the process of building a website that features multiple images and content organized into columns using Bootstrap as the framework. I'm wondering if there's a way to automatically adjust all the columns to the height of th ...

Changing color of entire SVG image: a step-by-step guide

Check out this SVG image I found: https://jsfiddle.net/hey0qvgk/3/ <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" width="90" height="9 ...

Centered header with underline styled using CSS pseudo element

I have centered heading text in a container, and I am using a border-bottom and pseudo element to create an underline effect. However, I am uncertain about how to make the underline stop at the end of the heading text. https://i.sstatic.net/FseHl.png Her ...

Tips on automating the process of moving overflowing elements into a dropdown menu

Challenge Description In need of a dynamic navigation bar, I faced the problem of displaying only the first X items on one line and have the remaining items hidden in a "Show more" dropdown. The challenge was to calculate the width of each item accurately ...

Guide to traversing nested documents provided as a JSON payload and making updates to each document within a collection

I am currently faced with the task of updating multiple documents in a collection as part of an ecommerce project for my school. The challenge lies in how to update the quantity of items in these documents based on the quantity purchased by the client. Th ...

What is the best way to add a floating action button in between two components using material-ui?

Currently, I am in the process of creating a Twitter timeline layout that includes adding a "profile" floating action button between two components. However, I am still unsure about the specific components that will be placed on either side of the button ...

How come the Bootstrap 4 column is not utilizing its entire available width?

My webpage is structured as follows: <div class="container"> <div class="row mb-5"> <div class="col-12 col-md-3"> <img class="mr-5 img-fluid" src="big_icon_1.png" alt="Big icon 1"> </div> <div class-"co ...

How can I eliminate the CSS value that was inherited?

Looking for a way to eliminate the effect of an inherited CSS property with Jquery. .class1 #id1 div.class2 input.class-input{ border-color: #bbb3b9 #c7c1c6 #c7c1c6; } Can someone explain how to delete this "border-color"? Thanks. ...

Achieving vertical center alignment in React Native: Tips and techniques

Just a quick heads-up: This question pertains to a school project. I'm currently knee-deep in a full-stack project that utilizes React Native for the front-end. I've hit a bit of a snag when it comes to page layout. Here's the snippet of my ...

Vite is having issues resolving Material UI icons, causing frustration

I switched my project from using CRA to Vite. After running npm run dev, I encountered the following error: The following dependencies have been imported but could not be resolved: @mui/icons-material/Article (imported by /Blog/Admin/Exports.jsx) @mu ...

The dimensions of Material UI cards vary between desktop and mobile devices

While developing a single page application, I encountered an issue with the display on mobile devices. The design looks great on my laptop screen, but it appears distorted on mobile. Currently, I am using Material UI with ReactJS for this project. Here is ...

Harvesting TypeScript attributes

I am encountering an issue with my form handling method. I have the following interface and useState in place: interface Message { message?: { title?: string; description?: string; body?: string; }; } const [message, setMessage] = useState ...

Gatsby is encountering an error when trying to locate the necessary resources for the error page, leading to React not being

During the development of my Gatsby Project, everything was working correctly with Gatsby Develop. However, I encountered an issue when I started the build process and deployed the website. Upon opening the website in a browser, I received the following e ...

The -webkit-linear-gradient effect can lead to noticeable banding issues on Chrome and Safari browsers

The title pretty much sums it up. The first image below is a screenshot of a page that is about 8000 pixels tall, taken in the most recent version of Chrome: On the other hand, this image depicts a different page (with the same CSS), which is only about 8 ...

The table's pagination displays above, thanks to Tailwindcss

I'm facing an issue where the pagination is showing up above the table, but I was expecting it to be displayed after the table. It would be ideal if the pagination appeared right after the table when adding multiple rows. Check this link for more inf ...

Laravel picks up on hushed tones

Is there a way to send messages from the client to the server using Laravel Echo and then save those messages in a database? I did some research and found out that the whisper method can be used to send messages to the Redis server. window.Echo.join(' ...

Is it advisable for me to simply generate a Category Framework instead?

I am looking to develop a Drawer Component that displays a Main Category and Sub Category beneath it. When a user clicks on the subcategory link, I want to show a component (Accordian.jsx) that showcases a list of products related to that particular subcat ...

Stop the Material UI Datagrid link column from redirecting onRowClicked

I am currently utilizing a Material UI Datagrid to showcase some data. Within one of the columns, there is a link that, when clicked, opens a URL in a new tab. I am facing an issue where I want to navigate to another page upon clicking on a row, but do not ...