CODEWITHSUNDEEP
reactjsiconsfont-awesome
Abdullah Mufti
Abdullah Mufti

Reputation: 101

ReactJs overlay Font awesone Icons

I want to ask how we can stack Font Awesome icons in ReactJS.

In HTML we use the following code:

<span class="fa-stack fa-2x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>

And in ReactJS we use: 

<FontAwesomeIcon icon={faFlag} />

How to stack a circle on user so that it looks as if Flag icon is in circle

Upvotes: 2

Views: 1265

Answers (3)

boa_in_samoa
boa_in_samoa

Reputation: 607

The other solutions didn't work well for me. Here's what I did:

<div>
    <span className="fa-stack">
        <FontAwesomeIcon className="fa-stack-2x" icon={['fas', 'fa-circle']} />
        <FontAwesomeIcon
            className="fa-stack-1x"
            icon={['fas', 'fa-flag']}
            transform="shrink-3"
        />
    </span>
</div>

Upvotes: 0

Milk
Milk

Reputation: 2655

You can use "layering" with the provided CSS to do the same:

<span className="fa-layers fa-fw fa-2x">
  <FontAwesomeIcon icon={faCircle} />
  <FontAwesomeIcon icon={faFlag} inverse transform="shrink-5" />
</span>

Upvotes: 2

Emanuele Scarabattoli
Emanuele Scarabattoli

Reputation: 4469

Yo can do something like that and play with positioning and flex:

.the-wrapper {
  position: relative;
}

.the-wrapper .icon {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>

<span class="fa-stack fa-2x the-wrapper">
  <FontAwesomeIcon icon={faCircle} />
  <div class="icon">
    <FontAwesomeIcon icon={faFlag} />
  </div>
</span>

Upvotes: 1

Related Questions