Font Awesome CSS Hexagon background

Please see the image at first Font Awesome with hexagon background and white border

I need to do it with HTML/CSS.

I've followed the link. But it's not working for me. It's showing look like- http://prnt.sc/d2k29n

It's my HTML-

<div class="warePost1"><i class="fa fa-dropbox"></i></div>

How to I can do the design with HTML/CSS?