Coder Coder - 4 months ago 10
CSS Question

Overlaying Image ontop of FontAwesomeIcon

I am designing a personal website and I wanted to use Font-Awesome Icons. Unfortunately, Font-Awesome doesn't have every single icon and I wanted a python icon. I have downloaded a python icon separately from a different source and I want to place this image on top of a font awesome icon.

This is an image of how I did this when both the icons were from Font-Awesome:

Please click here to see how I would like this to look

Could you please help by telling me how to do this.

Answer

FontAwesome provides a class fa-stack to overlap two icons. try this,

<span class="fa-stack fa-lg">
  <i class="fa fa-twitter fa-stack-1x"></i>
  <img src="http://placehold.it/40x40" class=" fa-stack-1x" style="width: 100%;opacity: 0.5;">
</span>

Thanks!

Comments