Location of Wechat icon in the footer

How can I put Wechat icon besides the Pinterest so when I click on that, the QR code shows on the bottom like this example website (Wechat at footer when we click it shows QR code under that):

https://www.concordpacific.com/

• I want to locate the wechat icon beside Pinterest but the location of Wechat icon changes in different browsers and when I make the browser smaller or bigger it also moves and It stays on the footer.
•   Also when I click on that it shows QR code in the middle of footer instead of under the Wechat icon.

Here is the link of website I'm working on:

https://chicory-guava-39th.squarespace.com/

pass:demo

This is the exact look that I want.
 

4 icons like as screenshot

hover on wechat >> show a qr image

hover on fb, linkedin, youtube >> show similar

Is this right?

@taunphan Only for wechat, when we click the QR code pops up. For now It pops out but both wechat icon and QR code pop up are not in the right place.