How to use numbers on icons with font awesome in REACT?

Question

I want the output to be like in the image below.

I found the could below

<!-- Create an icon wrapped by the fa-stack class -->
<span class="fa-stack">
    <!-- The icon that will wrap the number -->
    <span class="fa fa-circle-o fa-stack-2x"></span>
    <!-- a strong element with the custom content, in this case a number -->
    <strong class="fa-stack-1x">
        2    
    </strong>
</span>

but this code is not in REACT and I want to implement this in REACT using React-Fontawesome

So please help me with this.

Emanuele Scarabattoli · Accepted Answer · 2020-04-15T19:09:51.817

1

You can do something like this:

<div style={{ position: "relative" }}>
    <FontAwesomeIcon icon="circle" />
    <span style={{ position: "absolute" }}>2</span>
</div>

edited Apr 15 '20 at 19:09

answered Apr 15 '20 at 18:55

Emanuele Scarabattoli

4,103
1
12
21

I don't want to place a icon on it, I want to pace a digit. – Kundan Apr 15 '20 at 19:06

score 0 · Answer 2 · answered Sep 08 '22 at 17:37

This is a bit hacky but I'm using it for now. Rather than use an icon, I just use a div and round off the corners into a circle.

I'm actually using Chakra-UI's Box component to render a div, but the idea can be carried over to pure React. Here's the code for Chakra UI:

type CircledDigitProps = {
  num: number
} & BoxProps

function CircledDigit(props: CircledDigitProps){
  const { num, ...rest } = props
  return <Box {...rest} borderColor="initial" pl={2} pr={2}
     borderRadius="50%" borderStyle="solid" borderWidth="initial">
    {num}
  </Box>
}

Again - hacky - and not tested for different text sizes & in different contexts. But works for me for now.

Note: I'm using Typescript too.

How to use numbers on icons with font awesome in REACT?

2 Answers2