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
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>