Next, let's work on building our rocket. The Font Awesome rocket is cockeyed, so we need to transform it with a rotate(315deg)
attribute, fix its position on the screen, and start it 40% from the left. The rocket
element has two child fa-rocket I
elements inside it and an fa-fire I
element.
Style the first child with a fixed position, starting at 3% from the bottom and 40% from the left, and give it a text-shadow value of 1px 1px #666
(for a 3D effect). The rocket's second child will also have a fixed position, 3.2% from the bottom and 39.8% from the left.
Here, we also want to add a 3D effect with a grey background color of #333
, a background-clip attribute on the text, and a text shadow of rgb(255,255,255,0.8) at -1px 1px 3px blur. Finally, fa-fire
, which is the rocket's flame, should also be at a fixed position 12px from the bottom and 12px from the left. Also give it a text shadow to make it look more fiery. I'll put the code in the example and skip describing...