Hi,
First of all read this documentation about the mega menu functionality, it will be important to achieve the final result.
http://swiftideas.com/documentation/2014/05/10/menus/
2)
Check bellow the configuration of the demos menu item, it’s done with the mega menu configuration and choosing the number of columns(6 in this case) where we will have a sub menu item for each one of those columns.
https://www.dropbox.com/s/vcxeeu1f5t5utiy/Atelier_demos_menu_settings.png?dl=0
This is an example of a content of 1 of the image columns, you just need to duplicate and change links and image url. The code below should be place inside the sub menu item custom html of each column.
<a href="/selby-demo/"><img class="aligncenter size-medium wp-image-14492" src="http://swiftideas.com/wp-content/uploads/2014/09/selby-demo-300x230.jpg" alt="selby-demo" width="300" height="230" /></a>
<h5 style="text-align: center;"><a href="/selby-demo/" target="_blank">Selby Agency</a></h5>
The button is made with this code inside the menu item custom html.
<br>
<br>
[sf_button colour="black" type="sf-icon-reveal" size="standard" link="/features/#demos" target="_self" icon="fa-long-arrow-right" dropshadow="no" extraclass=""]VIEW ALL[/sf_button]
3)
Check this 2 links
http://swiftideas.com/documentation/2014/05/10/header-logo/
code widget global banner
1)I place this reply here so now you can already know how to create a mega menu, so to add the icon just check the image below.
https://www.dropbox.com/s/72u8i454nragc4c/atelier_menu_item_icon.png?dl=0
4) Check it here
http://fortawesome.github.io/Font-Awesome/icons/
Hope it helps.
-Rui