reactjsfont-awesomenext.jsreact-font-awesome

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

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

enter image description here

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.

Solution

  • You can do something like this:

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