How create a multiple fa-icon

I need to put multiple fa icon a trophy that must be the container and inside a number. Something like this:

https://img.clipartfest.com/fc3163ee61d664e212d4bb9764702efa_trophy-clipart-black-and-white-trophy-number-1-clipart_1920-1920.jpeg

The code that I use is ( but is not work) :

 <!-- create trophy -->
       <i class="fa fa-trophy fa-4x" aria-hidden="true" style="color:#FF8000;"><span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
 <i class="fa fa-stack-1x">1</i>

    </span>
    </i>

it is not work because the cirle is very big and it appears near to trophy and not above the trophy also the number 1 appears near the circle? Anyone can help me?

Solution

I believe you want something like this?

<i class="fa fa-trophy fa-2x"style="color:#FF8000;vertical-align:middle"></i>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-stack-1x"style="color:#FF8000;">1</i>
</span>

The sizes can be changed with the font awesome classes. The font awesome stacking works by placing elements on increasing layers, so the first thing in the span will be on the bottom.

EDIT: moved trophy out and added styling to it. Although you generally shouldn't do styling like this